@props(['disabled' => false, 'label' => null])

@php
    $model = $attributes->wire('model');
@endphp

<div>
    @if ($label)
        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
            {{ $label }}
        </label>
    @endif

    <div
        x-data="{
            value: @entangle($model),
            focused: false,
            selection: null,
            init() {
                this.$refs.editor.innerHTML = this.value || '';
                this.$watch('value', value => {
                    if (this.focused) {
                        return;
                    }
                    const next = value || '';
                    if (this.$refs.editor.innerHTML !== next) {
                        this.$refs.editor.innerHTML = next;
                    }
                });
            },
            sync() {
                this.value = this.$refs.editor.innerHTML;
                this.saveSelection();
            },
            saveSelection() {
                const selection = window.getSelection();
                if (!selection || selection.rangeCount === 0) {
                    return;
                }
                const range = selection.getRangeAt(0);
                if (!this.$refs.editor.contains(range.commonAncestorContainer)) {
                    return;
                }
                this.selection = range;
            },
            restoreSelection() {
                const selection = window.getSelection();
                if (!selection) {
                    return;
                }
                selection.removeAllRanges();
                if (this.selection) {
                    selection.addRange(this.selection);
                }
            },
            format(command, val = null) {
                if (this.$refs.editor) {
                    this.$refs.editor.focus();
                    this.restoreSelection();
                    document.execCommand(command, false, val);
                    this.sync();
                }
            },
            insertLink() {
                const url = prompt('Enter URL');
                if (url) {
                    this.format('createLink', url);
                }
            },
            removeLink() {
                this.format('unlink');
            }
        }"
        class="rounded-lg border border-gray-300 bg-transparent shadow-theme-xs dark:border-gray-700 dark:bg-gray-900"
    >
        <div class="flex flex-wrap items-center gap-2 border-b border-gray-200 px-3 py-2 text-sm text-gray-600 dark:border-gray-800 dark:text-gray-300">
            <button type="button" class="rounded-md px-2 py-1 font-semibold hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-800"
                x-on:mousedown.prevent x-on:click="format('bold')" {{ $disabled ? 'disabled' : '' }}>
                B
            </button>
            <button type="button" class="rounded-md px-2 py-1 italic hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-800"
                x-on:mousedown.prevent x-on:click="format('italic')" {{ $disabled ? 'disabled' : '' }}>
                I
            </button>
            <button type="button" class="rounded-md px-2 py-1 underline hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-800"
                x-on:mousedown.prevent x-on:click="format('underline')" {{ $disabled ? 'disabled' : '' }}>
                U
            </button>
            <span class="h-4 w-px bg-gray-200 dark:bg-gray-800"></span>
            <button type="button" class="rounded-md px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-800"
                x-on:mousedown.prevent x-on:click="format('insertUnorderedList')" {{ $disabled ? 'disabled' : '' }}>
                • List
            </button>
            <button type="button" class="rounded-md px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-800"
                x-on:mousedown.prevent x-on:click="format('insertOrderedList')" {{ $disabled ? 'disabled' : '' }}>
                1. List
            </button>
            <span class="h-4 w-px bg-gray-200 dark:bg-gray-800"></span>
            <button type="button" class="rounded-md px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-800"
                x-on:mousedown.prevent x-on:click="insertLink" {{ $disabled ? 'disabled' : '' }}>
                Link
            </button>
            <button type="button" class="rounded-md px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-800"
                x-on:mousedown.prevent x-on:click="removeLink" {{ $disabled ? 'disabled' : '' }}>
                Unlink
            </button>
        </div>

        <div
            x-ref="editor"
            class="min-h-[160px] w-full px-4 py-3 text-sm text-gray-800 outline-none placeholder:text-gray-400 dark:text-white/90 dark:placeholder:text-white/30 [&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-6 [&_ol]:pl-6 [&_li]:my-1 [&_a]:text-brand-600 [&_a]:underline [&_a]:underline-offset-2"
            contenteditable="{{ $disabled ? 'false' : 'true' }}"
            spellcheck="true"
            wire:ignore
            x-on:focus="focused = true; saveSelection()"
            x-on:blur="focused = false; sync()"
            x-on:input="sync()"
            x-on:keyup="saveSelection()"
            x-on:mouseup="saveSelection()"
        ></div>
    </div>
    <p class="text-theme-xs mt-1 text-error-500">{{ $errors->first($attributes->get('wire:model')) }}</p>
</div>