@props([
    'label',
    'description',
    'error' => '',
    'disabled' => false,
    'iconable' => false,
    'model',
    // 'slot' => isi konten
])

@php
    use App\Helpers\Reference;
    $defaultClass =
        'Input-Text-Editor w-full rounded-lg [&>.ql-editor]:rounded-lg [&>.ql-editor]:bg-gray-100 [&>.ql-editor]:min-h-60 [&>.ql-editor]:border [&>.ql-editor]:border-gray-300 my-1 text-black border-gray-300 [&>.ql-editor]:focus:outline-primary-100 [&>.ql-editor]:focus:bg-white focus:text-black ' .
        (strlen($error) > 1 ? 'border-red-300/80 text-red-400/80 focus:ring-red-400' : ' ');

    $editorRef = Reference::generate('textEditor');
@endphp

<x-stack
    class="w-full [&>.ql-toolbar]:mb-3 [&>.ql-toolbar]:rounded-md"
    x-data="{ focus: false }"
>

    @isset($label)
        <label
            class="font-semibold"
            x-bind:class="focus ? 'text-primary-100' : 'text-black/70'"
            for="{{ $attributes->get('id') }}"
        >
            {{ $label }}

            @if ($attributes->get('required'))
                <span class="text-red-300">*</span>
            @endif

        </label>
    @endisset

    @isset($description)
        <span class="text-xs text-black/50">{{ $description }}</span>
    @endisset

    <x-box
        {{ $attributes->twMerge($defaultClass) }}
        x-ref="{{ $editorRef }}"
        x-init="() => {
            quill = new Quill($refs['{{ $editorRef }}'], {
                theme: 'snow',
                placeholder: 'Tulis Konten disini',
                modules: {
                    imageUploader: {
                        upload: (file) => {
                            return new Promise((resolve, reject) => {
                                const formData = new FormData();
                                formData.append('image', file);

                                axios.post('{{ route('api.upload-image') }}', formData, {
                                        headers: {
                                            'Content-Type': 'multipart/form-data'
                                        }
                                    })
                                    .then(response => {
                                        resolve(`/${response.data.path}`);
                                    })
                                    .catch(error => {
                                        reject('Upload failed');
                                        alert(`Error: ${error.response.data.message}`)
                                        console.error(error);
                                    });
                            });
                        }
                    },
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        ['link', 'image'],
                        [{ 'header': 1 }, { 'header': 2 }],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
                        [{ 'size': ['small', false, 'large', 'huge'] }],
                    ],
                },
            });
            quill.on('text-change', () => {
                {{ $model }} = quill.root.innerHTML;
            });

            if ({{ $model }}) {
                quill.root.innerHTML = {!! $model !!};
            }
        }"
    >
        {{ $slot }}
    </x-box>

    @if (isset($error) && strlen($error) > 1)
        <span class="text-xs text-red-300/80 my-1">{{ $error }}</span>
    @endif

</x-stack>