@props([
    'required' => true,
    'label' => "",
    'content' => "",
    'id' => 'summernote-' . uniqid(),
    'height' => '300',
    'disabled' => false,
    'toolbar' => 'simple',
    'resize' => true,
    ])

@php
    $config = [
        'none' => [],
        'full' => [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['fontname', ['fontname']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['insert', ['link', 'picture', 'video']],
                        ['view', ['fullscreen', 'codeview']],
                    ],
        'simple' => [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['fontname', ['fontname']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['insert', ['link']],
                         ['view', ['fullscreen']]
                    ],
    ];
@endphp

@if($label)
    <label for="{{ $id }}" class="form-label">{{ $label }} @if($required)
            <span class="text-danger">*</span>
        @endif </label>
@endif
<div wire:ignore>
    <textarea id="{{ $id }}" {{ $attributes }} >{!! $content !!}</textarea>
</div>

@if($attributes->whereStartsWith('wire:model')->first())
    <div>@error($attributes->whereStartsWith('wire:model')->first()) <span
            class="text-danger">{{ $message }}</span> @enderror</div>
@endif

@pushonce('style')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
@endpushonce
@pushonce('script')
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
@endpushonce

@pushonce('script')
    <script>
        function initSummernote(id, model = null, toolbar = 'simple', height = {{ $height }}, disabled = false, resize = {{ $resize ? 'true' : 'false' }}) {
            const configToolbar = @json($config);
            return $('#' + id).summernote({
                toolbar: configToolbar[toolbar] ?? [],
                height: height,
                placeholder: '{{ __('lang.write_here') }}',
                tabsize: 2,
                disableResizeEditor: !resize,
                disableDragAndDrop: true,
                callbacks: {
                    onInit: function () {
                        if (disabled) {
                            $('#' + id).summernote('disable');
                        }
                    },
                    onPaste: function (e) {
                        const bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                        e.preventDefault();
                        document.execCommand('insertText', false, bufferText);
                    }
                },
            });
        }

        function setChange(event) {
            if (event.model !== undefined && event.model !== null && event.model !== '') {
                const element = $('#' + event.id);
                element.on('summernote.blur', function () {
                    let componentId = element.closest('[wire\\:id]').attr('wire:id');
                    if (componentId) {
                        let livewireComponent = Livewire.find(componentId);
                        livewireComponent.set(event.model, $('#' + event.id).summernote('code'));
                    }
                });
            }
        }

        document.addEventListener('livewire:initialized', () => {
            Livewire.on('update-summernote-content', event => {
                $('#' + event.id).summernote('code', event.content ?? '');
            });
            Livewire.on('enable-summernote', event => {
                $('#' + event.id).summernote('enable');
            });
            Livewire.on('disable-summernote', event => {
                $('#' + event.id).summernote('disable');
            });
            Livewire.on('reset-summernote', event => {
                const interval = setInterval(() => {
                    const element = $('#' + event.id);
                    if (element.length) {
                        element.summernote('destroy');
                        initSummernote(event.id, event.model ?? null, event.toolbar);
                        setChange(event);
                        clearInterval(interval);
                    }
                }, 100);
            });
        });
    </script>
@endpushonce

@push('script')
    <script>
        $(function () {
            initSummernote('{{ $id }}', '{{ $attributes->whereStartsWith('wire:model')->first() }}', '{{ $toolbar }}', {{ $height }}, {{ $disabled ? 'true' : 'false' }})
            @if($attributes->whereStartsWith('wire:model')->first())

            $('#' + '{{ $id }}').on('summernote.blur', function () {
            @this.set('{{ $attributes->whereStartsWith('wire:model')->first() }}', $('#' + '{{ $id }}').summernote('code'));
            });

            @endif
        })
    </script>
@endpush