@props(['for'])

@php
    $btn = 'rounded px-2.5 py-1 text-xs font-semibold text-ink-soft transition hover:bg-white hover:text-brand';
@endphp

<div class="flex flex-wrap items-center gap-1 rounded-t-lg border border-b-0 border-black/10 bg-paper px-2 py-1.5" data-mdeditor="{{ $for }}">
    <button type="button" class="{{ $btn }} font-bold" data-md data-before="**" data-after="**" title="{{ __('admin.editor.bold') }}">B</button>
    <button type="button" class="{{ $btn }} italic" data-md data-before="*" data-after="*" title="{{ __('admin.editor.italic') }}">I</button>
    <button type="button" class="{{ $btn }}" data-md data-block="## " title="{{ __('admin.editor.h2') }}">H2</button>
    <button type="button" class="{{ $btn }}" data-md data-block="### " title="{{ __('admin.editor.h3') }}">H3</button>
    <button type="button" class="{{ $btn }}" data-md data-block="- " title="{{ __('admin.editor.list') }}">• {{ __('admin.editor.list') }}</button>
    <button type="button" class="{{ $btn }}" data-md data-block="> " title="{{ __('admin.editor.quote') }}">❝</button>
    <button type="button" class="{{ $btn }}" data-md data-before="[" data-after="](https://)" title="{{ __('admin.editor.link') }}">{{ __('admin.editor.link') }}</button>
    <button type="button" class="{{ $btn }}" data-md data-before="![{{ __('admin.editor.image_alt') }}](" data-after=")" title="{{ __('admin.editor.image') }}">{{ __('admin.editor.image') }}</button>
    <button type="button" class="{{ $btn }}" data-md data-block="---&#10;" data-block-append title="{{ __('admin.editor.hr') }}">—</button>
    <span class="ms-auto text-[11px] text-ink-soft/70">{{ __('admin.editor.markdown_hint') }}</span>
</div>

@once
    <script>
        document.addEventListener('click', function (e) {
            const btn = e.target.closest('[data-md]');
            if (! btn) return;
            e.preventDefault();

            const bar = btn.closest('[data-mdeditor]');
            const ta = bar && document.getElementById(bar.dataset.mdeditor);
            if (! ta) return;

            const before = btn.dataset.before || '';
            const after = btn.dataset.after || '';
            const s = ta.selectionStart;
            const en = ta.selectionEnd;
            const v = ta.value;

            if (btn.dataset.block !== undefined) {
                const prefix = btn.dataset.block;
                const lineStart = v.lastIndexOf('\n', s - 1) + 1;

                if (btn.dataset.blockAppend !== undefined) {
                    ta.value = v.slice(0, en) + (en > 0 && v[en - 1] !== '\n' ? '\n' : '') + prefix + v.slice(en);
                    ta.setSelectionRange(en + prefix.length + 1, en + prefix.length + 1);
                } else {
                    const segment = v.slice(lineStart, en).split('\n').map(l => prefix + l).join('\n');
                    ta.value = v.slice(0, lineStart) + segment + v.slice(en);
                    ta.setSelectionRange(lineStart + prefix.length, lineStart + segment.length);
                }
            } else {
                const sel = v.slice(s, en);
                ta.value = v.slice(0, s) + before + sel + after + v.slice(en);
                ta.setSelectionRange(s + before.length, en + before.length);
            }

            ta.focus();
            ta.dispatchEvent(new Event('input', { bubbles: true }));
        });
    </script>
@endonce