export default class WebsiteLegalSettingsForm {
    constructor(config = {}) {
        const defaultConfig = {
            contentId: 'website-legal-settings-card',
            forms: {
                'legal_terminos_y_condiciones-nav': {
                    enabledCheckboxId: 'legal_terminos_y_condiciones-enabled',
                    quillSelector: '#legal_terminos_y_condiciones-content',
                    quillPlaceholder: 'Ingrese los términos y condiciones'
                },
                'legal_aviso_de_privacidad-nav': {
                    enabledCheckboxId: 'legal_aviso_de_privacidad-enabled',
                    quillSelector: '#legal_aviso_de_privacidad-content',
                    quillPlaceholder: 'Ingrese los aviso de privacidad'
                },
                'legal_politica_de_devoluciones-nav': {
                    enabledCheckboxId: 'legal_politica_de_devoluciones-enabled',
                    quillSelector: '#legal_politica_de_devoluciones-content',
                    quillPlaceholder: 'Ingrese los política de devoluciones y reembolsos'
                },
                'legal_politica_de_envios-nav': {
                    enabledCheckboxId: 'legal_politica_de_envios-enabled',
                    quillSelector: '#legal_politica_de_envios-content',
                    quillPlaceholder: 'Ingrese los política de envíos'
                },
                'legal_politica_de_cookies-nav': {
                    enabledCheckboxId: 'legal_politica_de_cookies-enabled',
                    quillSelector: '#legal_politica_de_cookies-content',
                    quillPlaceholder: 'Ingrese los política de cookies'
                },
                'legal_autorizaciones_y_licencias-nav': {
                    enabledCheckboxId: 'legal_autorizaciones_y_licencias-enabled',
                    quillSelector: '#legal_autorizaciones_y_licencias-content',
                    quillPlaceholder: 'Ingrese los autorizaciones y licencias'
                },
                'legal_informacion_comercial-nav': {
                    enabledCheckboxId: 'legal_informacion_comercial-enabled',
                    quillSelector: '#legal_informacion_comercial-content',
                    quillPlaceholder: 'Ingrese los información comercial'
                },
                'legal_consentimiento_para_el_login_de_terceros-nav': {
                    enabledCheckboxId: 'legal_consentimiento_para_el_login_de_terceros-enabled',
                    quillSelector: '#legal_consentimiento_para_el_login_de_terceros-content',
                    quillPlaceholder: 'Ingrese los consentimiento para el login de terceros'
                },
                'legal_leyendas_de_responsabilidad-nav': {
                    enabledCheckboxId: 'legal_leyendas_de_responsabilidad-enabled',
                    quillSelector: '#legal_leyendas_de_responsabilidad-content',
                    quillPlaceholder: 'Ingrese los leyendas de responsabilidad'
                }
            },
            saveButtonId: 'save-button',
            cancelButtonId: 'cancel-button',
            notificationAreaSelector: '.notification-container'
        };

        this.config = { ...defaultConfig, ...config };

        this.content = null;
        this.saveButton = null;
        this.cancelButton = null;
        this.notificationArea = null;
        this.currentFormKey = null;
        this.quillInstances = {}; // Almacenar instancias de Quill
        this.editState = {};

        this.init();
    }

    init() {
        this.content = document.getElementById(this.config.contentId);
        this.saveButton = document.getElementById(this.config.saveButtonId);
        this.cancelButton = document.getElementById(this.config.cancelButtonId);
        this.notificationArea = this.content.querySelector(this.config.notificationAreaSelector);

        // Puntero para rastrear si un formulario ha sido editado
        this.editState = Object.keys(this.config.forms).reduce((state, key) => {
            state[key] = false; // Inicializar todos los formularios como no editados
            return state;
        }, {});

        this.switchToForm(Object.keys(this.config.forms)[0]); // Cargar el primer formulario

        this.saveButton.addEventListener('click', () => this.handleSave());
        this.cancelButton.addEventListener('click', () => this.handleCancel());
    }

    reload() {
        const currentFormKey = this.currentFormKey;

        if (currentFormKey) {
            const quillInstance = this.quillInstances[currentFormKey];
            const { quillSelector, enabledCheckboxId } = this.config.forms[currentFormKey];
            const quillContainer = document.querySelector(quillSelector);
            const checkbox = document.getElementById(enabledCheckboxId);
            const textarea = document.getElementById(`${currentFormKey.replace('-nav', '')}-textarea`);

            quillInstance.root.innerHTML = textarea.value;

            // Agregar eventos
            checkbox.addEventListener('change', () =>
                this.handleCheckboxChange(checkbox, quillContainer, currentFormKey)
            );

            const isEnabled = checkbox.checked;

            quillInstance.enable(isEnabled); // Sincronizar habilitación con el checkbox
        }
    }

    switchToForm(formKey) {
        if (!this.config.forms[formKey]) return;

        this.currentFormKey = formKey;
        const { quillSelector, quillPlaceholder, enabledCheckboxId } = this.config.forms[formKey];
        const quillContainer = document.querySelector(quillSelector);
        const checkbox = document.getElementById(enabledCheckboxId);

        // Si la instancia de Quill no existe, inicialízala
        if (!this.quillInstances[formKey]) {
            this.quillInstances[formKey] = new Quill(quillSelector, {
                placeholder: quillPlaceholder,
                modules: { toolbar: this.getToolbar() },
                theme: 'snow'
            });

            // Escuchar cambios en el editor
            quillContainer.__quill = this.quillInstances[formKey];

            this.quillInstances[formKey].on(
                'text-change',
                this.debounce(() => this.handleContentChange(formKey), 300)
            );

            setTimeout(() => {
                const isEnabled = checkbox.checked;

                quillContainer.__quill.enable(isEnabled); // Sincronizar habilitación con el checkbox
            });
        }

        this.toggleButtonsState(this.editState[this.currentFormKey]);

        // Asignar evento al checkbox (asegura no duplicar eventos)
        if (!checkbox.dataset.bound) {
            checkbox.addEventListener('change', () => this.handleCheckboxChange(checkbox, quillContainer, formKey));
            checkbox.dataset.bound = true; // Marcar como manejado
        }
    }

    handleContentChange(formKey) {
        // Marcar el formulario como editado
        this.editState[formKey] = true;

        // Habilitar botones
        this.toggleButtonsState(true);
    }

    handleCheckboxChange(checkbox, quillContainer, formKey) {
        const isEnabled = checkbox.checked;

        if (quillContainer.__quill) {
            quillContainer.__quill.enable(isEnabled); // Habilitar o deshabilitar el editor

            if (isEnabled) {
                quillContainer.__quill.focus(); // Hacer focus si está habilitado
            }
        }

        // Marcar el formulario como editado
        this.editState[formKey] = true;
        this.toggleButtonsState(true);
    }

    handleSave() {
        const quillInstance = this.quillInstances[this.currentFormKey];
        const textarea = document.getElementById(`${this.currentFormKey.replace('-nav', '-textarea')}`);

        // Deshabilitar el estado de edición
        this.editState[this.currentFormKey] = false;

        //this.disableFormFields(this.content);
        this.toggleButtonsState(false);
        this.setButtonLoadingState(true);

        // Actualizar el contenido del textarea para sincronizar con Livewire
        textarea.value = quillInstance.root.innerHTML;

        // Simular el evento 'input' para actualizar el contenido en el textarea
        textarea.dispatchEvent(new Event('input', { bubbles: true }));

        // Emitir el evento de guardar en Livewire
        Livewire.dispatch('saveLegal');
    }

    handleCancel() {
        // Restablecer el estado de edición del formulario actual
        this.editState[this.currentFormKey] = false;

        //this.disableFormFields();
        this.toggleButtonsState(false);
    }

    disableFormFields(content) {
        content.querySelectorAll('input, select, textarea').forEach(field => {
            field.disabled = true;
        });

        if (this.fullEditor) {
            this.fullEditor.enable(false); // Deshabilitar el editor
        }
    }

    toggleButtonsState(state) {
        this.saveButton.disabled = !state;
        this.cancelButton.disabled = !state;
    }

    setButtonLoadingState(isLoading) {
        const loadingText = this.saveButton.getAttribute('data-loading-text');

        if (loadingText && isLoading) {
            this.saveButton.innerHTML = loadingText;
        } else {
            this.saveButton.innerHTML = this.saveButton.getAttribute('data-original-text') || this.saveButton.innerHTML;
        }
    }

    debounce(func, wait) {
        let timeout;

        return function (...args) {
            const context = this;

            clearTimeout(timeout);

            timeout = setTimeout(() => func.apply(context, args), wait);
        };
    }

    getToolbar() {
        return [
            [{ font: [] }, { size: [] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ color: [] }, { background: [] }],
            [{ script: 'super' }, { script: 'sub' }],
            [{ header: '1' }, { header: '2' }],
            [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
            ['link', 'clean']
        ];
    }
}