export default class SenderResponseForm {
    constructor(config = {}) {
        const defaultConfig = {
            formSenderResponseId: 'mail-sender-response-settings-card',
            replyToMethodId: 'reply_to_method',
            saveSenderResponseButtonId: 'save_sender_response_button',
            cancelButtonId: 'cancel_sender_response_button'
        };

        this.config = { ...defaultConfig, ...config };
        this.formSenderResponse = null;
        this.smtpReplyToMethod = null;
        this.saveButton = null;
        this.cancelButton = null;

        this.init(); // Inicializa el formulario
    }

    // Método para inicializar el formulario
    init() {
        try {
            // Obtener elementos esenciales
            this.formSenderResponse = document.getElementById(this.config.formSenderResponseId);
            this.smtpReplyToMethod = document.getElementById(this.config.replyToMethodId);
            this.saveButton = document.getElementById(this.config.saveSenderResponseButtonId);
            this.cancelButton = document.getElementById(this.config.cancelButtonId);

            // Asignar eventos
            this.formSenderResponse.addEventListener('input', event => this.handleInput(event));
            this.smtpReplyToMethod.addEventListener('change', () => this.handleToggleReplyToMethod());
            this.cancelButton.addEventListener('click', () => this.handleCancel());

            // Inicializar validación del formulario
            this.initializeFormValidation(this.formSenderResponse, this.senderResponsValidateConfig, () => {
                this.handleFormValid();
            });

            // Disparar el evento 'change' en el método de respuesta
            setTimeout(() => this.smtpReplyToMethod.dispatchEvent(new Event('change')), 0);
        } catch (error) {
            console.error('Error al inicializar el formulario de respuesta:', error);
        }
    }

    /**
     * Método de recarga parcial
     * Este método restablece la validación y los eventos sin destruir la instancia.
     */
    reload() {
        try {
            // Vuelve a inicializar la validación del formulario
            this.initializeFormValidation(this.formSenderResponse, this.senderResponsValidateConfig, () => {
                this.handleFormValid();
            });

            // Vuelve a agregar los eventos (si es necesario, depende de tu lógica)
            this.smtpReplyToMethod.dispatchEvent(new Event('change'));
        } catch (error) {
            console.error('Error al recargar el formulario:', error);
        }
    }

    /**
     * Maneja el evento de entrada en el formulario.
     * @param {Event} event - Evento de entrada.
     */
    handleInput(event) {
        const target = event.target;

        if (['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
            this.toggleButtonsState(this.formSenderResponse, true); // Habilitar botones
        }
    }

    /**
     * Muestra u oculta el campo de correo personalizado según el método de respuesta seleccionado.
     * @param {HTMLElement} smtpReplyToMethod - Elemento select del método de respuesta.
     */
    handleToggleReplyToMethod() {
        const emailCustomDiv = document.querySelector('.email-custom-div');

        if (emailCustomDiv) {
            emailCustomDiv.style.display = Number(this.smtpReplyToMethod.value) === 3 ? 'block' : 'none';
        }
    }

    /**
     * Cancels the sender response form submission.
     * This method disables the form buttons, disables all form fields,
     * and sets the cancel button to a loading state.
     *
     * @returns {void}
     */
    handleCancel() {
        this.disableFormFields(this.formSenderResponse);
        this.toggleButtonsState(this.formSenderResponse, false);
        this.setButtonLoadingState(this.cancelButton, true);
    }

    /**
     * Inicializa la validación del formulario.
     * @param {HTMLElement} form - El formulario.
     * @param {Object} config - Configuración de validación.
     * @param {Function} onValidCallback - Callback cuando el formulario es válido.
     */
    initializeFormValidation(form, config, onValidCallback) {
        return FormValidation.formValidation(form, config).on('core.form.valid', onValidCallback);
    }

    /**
     * Maneja la acción cuando el formulario es válido.
     */
    handleFormValid() {
        this.disableFormFields(this.formSenderResponse);
        this.toggleButtonsState(this.formSenderResponse, false);
        this.setButtonLoadingState(this.saveButton, true);

        Livewire.dispatch('saveMailSenderResponseSettings');
    }

    /**
     * Deshabilita todos los campos del formulario.
     * @param {HTMLElement} form - El formulario.
     */
    disableFormFields(form) {
        form.querySelectorAll('input, select, textarea').forEach(field => {
            field.disabled = true;
        });
    }

    /**
     * Habilita o deshabilita los botones dentro del formulario.
     * @param {HTMLElement} form - El formulario.
     * @param {boolean} state - Estado de habilitación.
     */
    toggleButtonsState(form, state) {
        form.querySelectorAll('button').forEach(button => {
            button.disabled = !state;
        });
    }

    /**
     * Configura el estado de carga de un botón.
     * @param {HTMLElement} button - El botón.
     * @param {boolean} isLoading - Si el botón está en estado de carga.
     */
    setButtonLoadingState(button, isLoading) {
        const loadingText = button.getAttribute('data-loading-text');

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

    senderResponsValidateConfig = {
        fields: {
            from_address: {
                validators: {
                    notEmpty: {
                        message: 'El correo electrónico de salida es obligatorio.'
                    },
                    emailAddress: {
                        message: 'Por favor, introduce un correo electrónico válido.'
                    }
                }
            },
            from_name: {
                validators: {
                    notEmpty: {
                        message: 'El nombre del remitente es obligatorio.'
                    }
                }
            },
            reply_to_method: {
                validators: {
                    notEmpty: {
                        message: 'El método de respuesta es obligatorio.'
                    }
                }
            },
            reply_to_email: {
                validators: {
                    callback: {
                        message: 'El correo electrónico de respuesta es obligatorio.',
                        callback: function (input) {
                            if (Number(document.getElementById('reply_to_method').value) === 3) {
                                return input.value.trim() !== '' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value);
                            }
                            return true;
                        }
                    }
                }
            },
            reply_to_name: {
                validators: {
                    callback: {
                        message: 'El nombre de respuesta es obligatorio.',
                        callback: function (input) {
                            if (Number(document.getElementById('reply_to_method').value) === 3) {
                                return input.value.trim() !== '';
                            }
                            return true;
                        }
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    };
}