<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/components/ui/JoditTextEditor.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------

JoditTextEditor — wrapper genérico do Jodit pra rich text simples
(bold/italic/underline + listas + link + eraser). Substitui o PrimeVue
<Editor> (Quill) em pontos onde a medição via JS do Quill colapsa
em flex layouts (ex: 3 editores empilhados num mesmo card).

Pra editor de e-mail com snippets de logo header/footer, use
JoditEmailEditor.vue (componente irmão, dedicado).
-->
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { Jodit } from 'jodit/esm/index.js';
import 'jodit/es2021/jodit.min.css';

const props = defineProps({
    modelValue: { type: String, default: '' },
    minHeight: { type: Number, default: 120 },
    placeholder: { type: String, default: '' }
});

const emit = defineEmits(['update:modelValue']);
const container = ref(null);
let jodit = null;
let _ignoreChange = false;
let _themeObserver = null;

function isDark() {
    return document.documentElement.classList.contains('app-dark');
}

function buildConfig() {
    return {
        height: props.minHeight,
        language: 'pt_br',
        theme: isDark() ? 'dark' : 'default',
        toolbarAdaptive: false,
        toolbarSticky: false,
        showCharsCounter: false,
        showWordsCounter: false,
        showXPathInStatusbar: false,
        disablePlugins: ['about', 'stat'],
        placeholder: props.placeholder,
        // Toolbar enxuta — espelha o Quill que estava antes
        // (bold/italic/underline + listas ordered/bullet + link).
        buttons: [
            'bold', 'italic', 'underline', '|',
            'ul', 'ol', '|',
            'link'
        ],
        uploader: { insertImageAsBase64URI: false },
        filebrowser: { ajax: { url: '' } }
    };
}

function initJodit() {
    if (jodit) {
        jodit.destruct();
        jodit = null;
    }
    jodit = Jodit.make(container.value, buildConfig());
    if (props.modelValue) jodit.value = props.modelValue;
    jodit.events.on('change', (content) => {
        if (!_ignoreChange) emit('update:modelValue', content);
    });
}

onMounted(() => {
    initJodit();
    // Re-cria o editor quando o tema muda (Jodit nao re-tema dinamicamente).
    _themeObserver = new MutationObserver(() => {
        const current = isDark() ? 'dark' : 'default';
        if (jodit && jodit.o?.theme !== current) {
            const saved = jodit.value;
            initJodit();
            if (saved) jodit.value = saved;
        }
    });
    _themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
});

onBeforeUnmount(() => {
    _themeObserver?.disconnect();
    _themeObserver = null;
    jodit?.destruct();
    jodit = null;
});

watch(
    () => props.modelValue,
    (val) => {
        if (!jodit) return;
        if (jodit.value !== (val ?? '')) {
            _ignoreChange = true;
            jodit.value = val ?? '';
            _ignoreChange = false;
        }
    }
);
</script>

<template>
    <div ref="container" />
</template>
