{{--
    TinyMCE Rich Text Editor Component
--}}
@props([
    'id'          => null,
    'name'        => '',
    'label'       => '',
    'placeholder' => '',
    'rows'        => 10,
    'value'       => null,
    'hint'        => '',
    'required'    => false,
    'disabled'    => false,
    'height'      => null,
    'hright'      => null,
    'minHeight'   => 360,
    'toolbar'     => null,
    'plugins'     => null,
    'features'    => [],
])

@php
    $editorId = $id ?: $name;
    $content = old($name, $value);
    $editorHeight = $height ?? $hright;
    $defaultToolbar = [
    'undo redo',
    'blocks',
    'bold italic underline',
    'preview fullscreen code',
    ];

    $defaultPlugins = [
        'code',
        'preview',
        'fullscreen',
    ];

    $featureMap = [

        'text-format' => [
            'toolbar' => [
                'forecolor backcolor',
                'removeformat',
            ],
            'plugins' => [],
        ],

        'alignment' => [
            'toolbar' => [
                'alignleft aligncenter alignright alignjustify',
            ],
            'plugins' => [],
        ],

        'lists' => [
            'toolbar' => [
                'bullist numlist',
            ],
            'plugins' => [
                'lists',
                'advlist',
            ],
        ],

        'indent' => [
            'toolbar' => [
                'outdent indent',
            ],
            'plugins' => [],
        ],

        'media' => [
            'toolbar' => [
                'link image media',
            ],
            'plugins' => [
                'link',
                'image',
                'media',
            ],
        ],

        'table' => [
            'toolbar' => [
                'table',
            ],
            'plugins' => [
                'table',
            ],
        ],

        'search' => [
            'toolbar' => [
                'searchreplace',
            ],
            'plugins' => [
                'searchreplace',
            ],
        ],

        'special-char' => [
            'toolbar' => [
                'charmap',
            ],
            'plugins' => [
                'charmap',
            ],
        ],

        'emojis' => [
            'toolbar' => [
                'emoticons',
            ],
            'plugins' => [
                'emoticons',
            ],
        ],

        'word-count' => [
            'toolbar' => [],
            'plugins' => [
                'wordcount',
            ],
        ],
    ];

    if (empty($features)) {
        $features = array_keys($featureMap);
    }

    $toolbarItems = $defaultToolbar;
    $pluginItems = $defaultPlugins;

    foreach ($features as $feature) {
        if (! isset($featureMap[$feature])) {
            continue;
        }

        $toolbarItems = array_merge(
            $toolbarItems,
            $featureMap[$feature]['toolbar']
        );

        $pluginItems = array_merge(
            $pluginItems,
            $featureMap[$feature]['plugins']
        );
    }

    $resolvedToolbar = $toolbar ?: implode(' | ', array_unique($toolbarItems));

    $resolvedPlugins = $plugins ?: implode(' ', array_unique($pluginItems));

    $c = 'block w-full resize-y rounded-lg border border-input bg-card px-3 py-2.5 text-sm text-card-foreground shadow-sm transition-colors duration-200 placeholder:text-muted-foreground focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:border-primary-400 disabled:cursor-not-allowed disabled:opacity-60';
    $c .= $errors->has($name) ? ' border-red-400 focus:border-red-500 focus:ring-red-500/20' : '';
@endphp

<div
    class="space-y-1.5"
    x-data="tinymceEditor(@js([
        'selector' => '#' . $editorId,
        'height' => $editorHeight !== null ? (is_numeric($editorHeight) ? (int) $editorHeight : $editorHeight) : null,
        'minHeight' => (int) $minHeight,
        'placeholder' => $placeholder,
        'disabled' => (bool) $disabled,
        'toolbar' => $resolvedToolbar,
        'plugins' => $resolvedPlugins,
    ]))"
    x-init="init()"
    @tinymce:sync.window="sync()"
>
    @if($label)
        <label for="{{ $editorId }}" class="mb-1.5 block text-sm font-medium text-foreground">
            {{ $label }}
            @if($required)
                <span class="ml-0.5 text-red-500" aria-hidden="true">*</span>
            @endif
        </label>
    @endif

    <textarea
        id="{{ $editorId }}"
        name="{{ $name }}"
        rows="{{ $rows }}"
        placeholder="{{ $placeholder }}"
        data-rich-text-editor="tinymce"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge(['class' => $c]) }}
    >{{ $content }}</textarea>

    @if($hint && !$errors->has($name))
        <p class="mt-1.5 text-xs text-muted-foreground">{{ $hint }}</p>
    @endif
<!-- <x-forms.error :name="$name" /> -->
</div>