@props(['content', 'maxLength' => null, 'splittable' => false])

<label class="mb-2 block text-sm font-medium text-zinc-800 dark:text-zinc-200">
    Текст
</label>
<div
    x-data="richTextEditor(@js($content), @js($maxLength))"
    class="overflow-hidden rounded-lg border border-zinc-300 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
>
    <div
        wire:ignore
        class="flex flex-wrap gap-1 border-b border-zinc-200 p-2 dark:border-zinc-700"
        role="toolbar"
        aria-label="Форматування тексту"
    >
        <button type="button" title="Жирний" aria-label="Жирний" :aria-pressed="active.bold" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.bold }" class="rounded px-2 py-1 font-bold hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="toggleMark('bold')">B</button>
        <button type="button" title="Курсив" aria-label="Курсив" :aria-pressed="active.italic" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.italic }" class="rounded px-2 py-1 italic hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="toggleMark('italic')">I</button>
        <button type="button" title="Підкреслення" aria-label="Підкреслення" :aria-pressed="active.underline" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.underline }" class="rounded px-2 py-1 underline hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="toggleMark('underline')">U</button>
        <button type="button" title="Закреслення" aria-label="Закреслення" :aria-pressed="active.strike" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.strike }" class="rounded px-2 py-1 line-through hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="toggleMark('strike')">S</button>
        <span class="mx-1 border-l border-zinc-300 dark:border-zinc-700"></span>
        <select aria-label="Шрифт" title="Шрифт" x-model="fontFamily" @change="setFontFamily($event.target.value)" class="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:border-zinc-700 dark:bg-zinc-900">
            <option value="">Шрифт</option>
            <option value='Arial, sans-serif'>Arial</option>
            <option value='"Times New Roman", serif'>Times New Roman</option>
            <option value='Georgia, serif'>Georgia</option>
            <option value='Verdana, sans-serif'>Verdana</option>
            <option value='"Courier New", monospace'>Courier New</option>
            <option value='Tahoma, sans-serif'>Tahoma</option>
        </select>
        <select aria-label="Розмір шрифта" title="Розмір шрифта" x-model="fontSize" @change="setFontSize($event.target.value)" class="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:border-zinc-700 dark:bg-zinc-900">
            <option value="">Розмір</option>
            <option value="12px">12</option>
            <option value="14px">14</option>
            <option value="16px">16</option>
            <option value="18px">18</option>
            <option value="20px">20</option>
            <option value="24px">24</option>
            <option value="32px">32</option>
            <option value="40px">40</option>
        </select>
        <label class="inline-flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800">
            <span>Колір тексту</span>
            <input type="color" x-model="color" aria-label="Колір тексту" title="Колір тексту" class="h-7 w-8 cursor-pointer rounded border-0 bg-transparent p-0" @change="setColor()">
        </label>
        <span class="mx-1 border-l border-zinc-300 dark:border-zinc-700"></span>
        <button type="button" title="Заголовок 1" aria-label="Заголовок 1" :aria-pressed="active.heading1" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.heading1 }" class="rounded px-2 py-1 text-sm font-semibold hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setBlock('heading1')">H1</button>
        <button type="button" title="Заголовок 2" aria-label="Заголовок 2" :aria-pressed="active.heading2" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.heading2 }" class="rounded px-2 py-1 text-sm font-semibold hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setBlock('heading2')">H2</button>
        <button type="button" title="Цитата" aria-label="Цитата" :aria-pressed="active.blockquote" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.blockquote }" class="rounded px-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setBlock('blockquote')">Цитата</button>
        <span class="mx-1 border-l border-zinc-300 dark:border-zinc-700"></span>
        <button type="button" title="По лівому краю" aria-label="По лівому краю" :aria-pressed="align === 'left'" :class="{ 'bg-zinc-200 dark:bg-zinc-700': align === 'left' }" class="rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setAlign('left')">⇤</button>
        <button type="button" title="По центру" aria-label="По центру" :aria-pressed="align === 'center'" :class="{ 'bg-zinc-200 dark:bg-zinc-700': align === 'center' }" class="rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setAlign('center')">↔</button>
        <button type="button" title="По правому краю" aria-label="По правому краю" :aria-pressed="align === 'right'" :class="{ 'bg-zinc-200 dark:bg-zinc-700': align === 'right' }" class="rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setAlign('right')">⇥</button>
        <button type="button" title="По ширині" aria-label="По ширині" :aria-pressed="align === 'justify'" :class="{ 'bg-zinc-200 dark:bg-zinc-700': align === 'justify' }" class="rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setAlign('justify')">≡</button>
        <span class="mx-1 border-l border-zinc-300 dark:border-zinc-700"></span>
        <button type="button" title="Напрям зліва направо" aria-label="Напрям зліва направо" :aria-pressed="dir === 'ltr'" :class="{ 'bg-zinc-200 dark:bg-zinc-700': dir === 'ltr' }" class="rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setDirection('ltr')">LTR ▶</button>
        <button type="button" title="Напрям справа наліво" aria-label="Напрям справа наліво" :aria-pressed="dir === 'rtl'" :class="{ 'bg-zinc-200 dark:bg-zinc-700': dir === 'rtl' }" class="rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="setDirection('rtl')">◀ RTL</button>
        <span class="mx-1 border-l border-zinc-300 dark:border-zinc-700"></span>
        <button type="button" title="Скасувати" aria-label="Скасувати" class="rounded px-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="undo()">↶</button>
        <button type="button" title="Повторити" aria-label="Повторити" class="rounded px-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="redo()">↷</button>
    </div>
    <div x-ref="editor" wire:ignore class="rich-text-editor min-h-56 px-4 py-3 text-zinc-900 outline-none dark:text-zinc-100"></div>
    <div
        x-show="maxLength !== null && !(@js($splittable) && $wire.splitText)"
        class="flex flex-wrap justify-between gap-x-4 gap-y-1 border-t border-zinc-200 px-4 py-2 text-sm dark:border-zinc-700"
        role="status"
    >
        <span
            x-text="`${characterCount} / ${maxLength} символів`"
            :class="characterCount > maxLength ? 'font-medium text-red-600 dark:text-red-400' : 'text-zinc-600 dark:text-zinc-300'"
        ></span>
        <span x-show="characterCount <= maxLength" class="text-zinc-500 dark:text-zinc-400">
            Залишилось: <span x-text="maxLength - characterCount"></span>
        </span>
        <span x-show="characterCount > maxLength" class="font-medium text-red-600 dark:text-red-400">
            Перевищено на <span x-text="characterCount - maxLength"></span> символів
        </span>
    </div>
</div>
@error('editorContent')
    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror