class DisenioCubierta {

    constructor(domItem, wizardForm, validatorStepper) {
        this.domItem = domItem;

        this.wizardStep = wizardForm.querySelector('#cubierta-libro');
        this.validatorStepper = validatorStepper;

        this.disenioCubierta = this.domItem.find(".tipo-cubierta");
        this.solapasCubierta = this.domItem.find(".solapas-cubierta");
        this.papelCubierta = this.domItem.find(".papel-cubierta");

        this.divSolapas = this.domItem.find("#divSolapasCubierta");
        this.divCarasImpresion = this.domItem.find("#divCarasImpresion");
        this.divConfigTapaDura = this.domItem.find("#divConfigTapaDura");

        this.carasCubierta = this.domItem.find("#carasCubierta");

        this.tapaBlanda = this.domItem.find("#tapaBlanda");
        this.tapaDuraLomoRecto = this.domItem.find("#tapaDura");
        this.tapaDuraLomoRedondo = this.domItem.find("#tapaDuraLomoRedondo");

        this.sinSolapas = this.domItem.find("#solapasCubiertaNo");
        this.conSolapas = this.domItem.find("#solapasCubiertaSi");
        this.divTamanioSolapas = this.domItem.find("#divTamanioSolapas");
        this.tamanioSolapasCubierta = $(this.domItem.find("#solapasCubierta"));

        this.cartulinaEstucada = this.domItem.find("#cartulinaEstucada");
        this.estucadoMate = this.domItem.find("#estucadoMate");

        this.divGramajeCubierta = this.domItem.find("#divGramajeCubierta");
        this.gramaje = this.domItem.find(".check-gramaje-cubierta");
        this.gramaje170 = $(this.domItem.find("#divGramaje170Cubierta"));
        this.gramaje250 = $(this.domItem.find("#divGramaje250Cubierta"));
        this.gramaje270 = $(this.domItem.find("#divGramaje270Cubierta"));
        this.gramaje300 = $(this.domItem.find("#divGramaje300Cubierta"));
        this.gramaje350 = $(this.domItem.find("#divGramaje350Cubierta"));

        this.checksGramaje = $('.check-gramaje-cubierta');

        this.configuracionSobrecubierta = this.domItem.find(".config-sobrecubierta");
        this.sobrecubierta = this.domItem.find("#addSobrecubierta");
        this.configuracionFaja = this.domItem.find(".config-faja");
        this.faja = this.domItem.find("#addFaja");

        this.solapasSobrecubierta = this.domItem.find("#solapasSobrecubierta");
        this.solapasFaja = this.domItem.find("#solapasFaja");
        this.altoFaja = this.domItem.find("#altoFaja");

        this.initValidation();

        // Creamos un nuevo observador que detecta cambios en los atributos
        this.observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    const targetElement = mutation.target;
                    // check if targetElement has class 'selected'
                    if (targetElement.classList.contains('tipo-cubierta')) {
                        this.#handleMenuTipoCubierta();
                    }
                    else if (targetElement.classList.contains('solapas-cubierta')) {
                        this.#handleMenuSolapas();
                    }
                    else if (targetElement.classList.contains('papel-cubierta')) {
                        this.#handleMenuPapel();
                    }
                }
            });
        });
    }


    init() {

        const self = this;

        // Eventos
        this.disenioCubierta.on('click', this.#handleDisenioCubierta.bind(this));
        this.solapasCubierta.on('click', this.#handleSolapasCubierta.bind(this));
        this.papelCubierta.on('click', this.#handlePapelCubierta.bind(this));
        this.tamanioSolapasCubierta.on('change', this.#handleTamanioSolapas.bind(this));
        this.altoFaja.on('blur', this.#handleInputs);
        this.solapasSobrecubierta.on('blur', this.#handleInputs);
        this.solapasFaja.on('blur', this.#handleInputs);

        this.carasCubierta.on('change', this.#handleCarasCubierta.bind(this));

        this.sobrecubierta.on('change', () => {
            this.sobrecubierta.is(":checked") ? this.configuracionSobrecubierta.removeClass("d-none") : this.configuracionSobrecubierta.addClass("d-none")
        }
        );
        this.faja.on('change', () => {
            this.faja.is(":checked") ? this.configuracionFaja.removeClass("d-none") : this.configuracionFaja.addClass("d-none")
        }
        );


        // Observadores
        this.observer.observe(this.tapaBlanda[0], { attributes: true });
        this.observer.observe(this.tapaDuraLomoRecto[0], { attributes: true });
        this.observer.observe(this.tapaDuraLomoRedondo[0], { attributes: true });
        this.observer.observe(this.cartulinaEstucada[0], { attributes: true });
        this.observer.observe(this.estucadoMate[0], { attributes: true });
        this.observer.observe(this.conSolapas[0], { attributes: true });
        this.observer.observe(this.sinSolapas[0], { attributes: true });

        this.checksGramaje.each(function () {

            const customOptionEL = $(this);
            customOptionEL.on('click', function () {
                self.#handleClickGramaje(customOptionEL);
            });
        });
    }

    initValidation() {

        const stepper = this.validatorStepper;

        this.formValidation = FormValidation.formValidation(this.wizardStep, {
            fields: {
                div_tipo_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const div = $('#divTipoCubierta'); // Selecciona el div

                                div.find('.fv-plugins-message-container').remove();
                                if ($('.tipo-cubierta.selected').length > 0) {
                                    return true;
                                }
                                else {
                                    div.append(`
                                        <div class="fv-plugins-message-container invalid-feedback">
                                            <div data-field="div_tipo_cubierta" data-validator="callback" style="margin-top: 50px;">
                                                ${window.translations["validation"].tipo_cubierta}
                                            </div>
                                        </div>
                                    `);
                                }
                                return false;
                            },
                        }
                    }
                },
                div_solapas_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const div = $('#divSolapasCubierta');
                                if (div.hasClass("d-none")) return true;

                                div.find('.fv-plugins-message-container').remove();
                                if ($('.solapas-cubierta.selected').length > 0) {
                                    return true;
                                }
                                else {
                                    div.append(`
                                        <div class="fv-plugins-message-container invalid-feedback">
                                            <div data-field="div_solapas_cubierta" data-validator="callback" style="margin-top: 50px;">
                                                ${window.translations["validation"].opcion_solapas}
                                            </div>
                                        </div>
                                    `);
                                }
                                return false;
                            },
                        }
                    }
                },
                div_papel_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const div = $('#divPapelCubierta');
                                if (div.hasClass("d-none")) return true;

                                div.find('.fv-plugins-message-container').remove();
                                if ($('.papel-cubierta.selected').length > 0) {
                                    return true;
                                }
                                else {
                                    div.append(`
                                        <div class="fv-plugins-message-container invalid-feedback">
                                            <div data-field="div_papel_cubierta" data-validator="callback" style="margin-top: 50px;">
                                                ${window.translations["validation"].papel_interior}
                                            </div>
                                        </div>
                                    `);
                                }
                                return false;
                            },
                        }
                    }
                },
                div_gramaje_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const div = $('#divGramajeCubierta'); // Selecciona el div

                                div.find('.fv-plugins-message-container').remove();
                                if ($('.check-gramaje-cubierta:checked').length > 0) {
                                    return true;
                                }
                                else {
                                    div.append(`
                                    <div class="fv-plugins-message-container invalid-feedback">
                                        <div data-field="div_gramaje_cubierta" data-validator="callback" style="margin-top: 50px;">
                                            ${window.translations["validation"].gramaje_interior}
                                        </div>
                                    </div>
                                `);
                                }
                                return false;
                            },
                        }
                    }
                },
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap5: new FormValidation.plugins.Bootstrap5({
                    // Use this for enabling/changing valid/invalid class
                    // eleInvalidClass: '',
                    eleValidClass: '',
                    rowSelector: function (field, ele) {
                        // field is the field name
                        // ele is the field element
                        switch (field) {
                            case 'div_tipo_cubierta':
                            case 'div_solapas_cubierta':
                            case 'div_papel_cubierta':
                            case 'div_gramaje_cubierta':
                                return '.col-sm-10';
                            default:
                                return '.col-sm-3';
                        }
                    }
                }),
                autoFocus: new FormValidation.plugins.AutoFocus(),
                submitButton: new FormValidation.plugins.SubmitButton()
            }
        }).on('core.form.valid', () => {
            stepper.next();
        });
    }


    getSolapasCubierta() {

        try {

            if (this.solapasCubierta.hasClass("selected").length == 0)
                return null;
            else {
                if (this.sinSolapas.hasClass("selected"))
                    return false;
                else if (this.conSolapas.hasClass("selected"))
                    return parseInt(this.tamanioSolapasCubierta.val());
                else
                    return null;
            }
        }
        catch (error) {
            return null;
        }
    }


    getPapel() {

        try {
            if (this.papelCubierta.filter('.selected').length > 0) {
                return this.papelCubierta.filter('.selected').attr('cod');
            }
            return null;
        }
        catch (e) {
            return null;
        }
    }


    getGramaje() {

        try {

            if (this.divGramajeCubierta.hasClass("d-none"))
                return null;

            if (this.gramaje.filter(':checked').length > 0)
                return this.gramaje.filter(':checked').attr('data-value');

            else
                return null;

        } catch (e) {
            return null;
        }
    }

    getAcabados(forResumen = false) {
        try {
            let acabados = {};
            if (forResumen) {
                acabados = 'Plastificado ' + this.domItem.find("#plastificado").children("option:selected").text();
                if (this.domItem.find("#barniz").children("option:selected").val() != 'NONE')
                    acabados += ", Barniz UVI " + this.domItem.find("#barniz").children("option:selected").text();
                if (this.domItem.find("#estampado").children("option:selected").val() != 'NONE')
                    acabados += ", Estampado " + this.domItem.find("#estampado").children("option:selected").text();
                if (this.domItem.find("#retractilado").hasClass('selected')) {
                    acabados += ", Retractilado ";
                }
                return acabados;
            }
            else {
                acabados.plastificado = this.domItem.find("#plastificado ").children("option:selected").val();
                acabados.barniz = this.domItem.find("#barniz").children("option:selected").val();
                acabados.estampado = this.domItem.find("#estampado").children("option:selected").val();
                acabados.retractilado = this.domItem.find("#retractilado").hasClass('selected') ? 'RETR' : 'NONE';
            }
            return acabados;
        } catch (e) {
            return null;
        }
    }


    getCabezada(forResumen = false) {

        try {
            if (this.tapaBlanda.hasClass("selected"))
                return false;
            else
                if (forResumen)
                    return this.domItem.find("#cabezada").children("option:selected").text();
                else
                    return this.domItem.find("#cabezada").children("option:selected").val();
        } catch (e) {
            return null;
        }
    }


    getGuardas(forResumen = false) {

        try {
            if (this.tapaBlanda.hasClass("selected")) {
                return false;
            }
            else {
                let guardas = {};

                if (forResumen) {
                    let papelGuardas = this.domItem.find("#papelGuardas").children("option:selected").text();
                    guardas.papel = papelGuardas.split(' ')[0] + ' ' + papelGuardas.split(' ')[1];
                    guardas.gramaje = papelGuardas.split(' ')[2];
                    guardas.guardasImpresas = this.domItem.find("#guardasImpresas").children("option:selected").text();
                }
                else {
                    let papelGuardas = this.domItem.find("#papelGuardas").children("option:selected").val();
                    guardas.papel = papelGuardas.split('_')[0];
                    guardas.gramaje = papelGuardas.split('_')[1];
                    guardas.guardasImpresas = this.domItem.find("#guardasImpresas").children("option:selected").val();
                }
                return guardas;
            }

        } catch (e) {
            return null;
        }
    }

    getSobrecubierta(forResumen = false) {

        try {
            if (!this.sobrecubierta.is(":checked")) {
                return false;
            }
            else {
                if (forResumen) {
                    let sobrecubierta = {};
                    const papel = this.domItem.find("#papelSobrecubierta").children("option:selected").text();
                    sobrecubierta.papel = papel.split(' ')[0] + ' ' + papel.split(' ')[1];
                    sobrecubierta.gramaje = papel.split(' ')[2];
                    sobrecubierta.solapas = this.domItem.find("#solapasSobrecubierta").val();
                    sobrecubierta.plastificado = 'Plastificado ' + this.domItem.find("#plastificadoSobrecubierta").children("option:selected").text();
                }
                else {
                    let sobrecubierta = {};
                    let papel = this.domItem.find("#papelSobrecubierta").children("option:selected").val();
                    sobrecubierta.papel = papel.split('_')[0];
                    sobrecubierta.gramaje = papel.split('_')[1];
                    sobrecubierta.solapas = this.domItem.find("#solapasSobrecubierta").val();
                    sobrecubierta.plastificado = this.domItem.find("#plastificadoSobrecubierta").children("option:selected").val();
                    return sobrecubierta;
                }
            }

        } catch (e) {
            return null;
        }
    }


    getFaja() {

        try {
            if (!this.faja.is(":checked")) {
                return false;
            }
            else {
                let faja = {};
                faja.alto = this.domItem.find("#altoFaja").val();
                let papel = this.domItem.find("#papelFaja").children("option:selected").val();
                faja.papel = papel.split('_')[0];
                faja.gramaje = papel.split('_')[1];
                faja.solapas = this.domItem.find("#solapasFaja").val();
                faja.plastificado = this.domItem.find("#plastificadoFaja").children("option:selected").val();
                return faja;
            }

        } catch (e) {
            return null;
        }
    }

    #handleCarasCubierta() {
        // Si es a dos caras
        if (this.carasCubierta.val() == 4) {
            this.cartulinaEstucada.addClass("d-none");
        }
        else {
            this.cartulinaEstucada.removeClass("d-none");
        }
    }


    #handleDisenioCubierta(event) {
        // Accede al ID del elemento que disparó el evento
        const element = $(event.target);

        let class2Find = '.tipo-cubierta';

        let containers = element.closest(class2Find).parent().find(class2Find);
        for (let container of containers) {
            if (container != element.closest(class2Find)[0]) {
                $(container).removeClass('selected');
                $(container).find('.image-presupuesto').removeClass('selected');
            }
        }

        element.closest(class2Find).toggleClass('selected');
        element.closest('.image-presupuesto').toggleClass('selected');

        $(".papel-cubierta").removeClass("selected");

        if (this.tapaBlanda.hasClass("selected")) {
            if (this.carasCubierta.val() == 2) {
                this.cartulinaEstucada.removeClass("d-none");
            }
            this.divGramajeCubierta.addClass("d-none");
        }
        else {
            this.cartulinaEstucada.addClass("d-none");
            this.estucadoMate.addClass("selected");
            this.divGramajeCubierta.removeClass("d-none");
            this.gramaje170.removeClass("d-none");
            this.gramaje170.closest(".checkbox-presupuesto-container").addClass("checked");
            this.gramaje250.addClass("d-none");
            this.gramaje270.addClass("d-none");
            this.gramaje300.addClass("d-none");
            this.gramaje350.addClass("d-none");
        }

        element.trigger('change');
    }


    #handleSolapasCubierta(event) {
        // Accede al ID del elemento que disparó el evento
        const element = $(event.target);

        let class2Find = '.solapas-cubierta';

        let containers = element.closest(class2Find).parent().find(class2Find);
        for (let container of containers) {
            if (container != element.closest(class2Find)[0]) {
                $(container).removeClass('selected');
                $(container).find('.image-presupuesto').removeClass('selected');
            }
        }

        element.closest(class2Find).toggleClass('selected');
        element.closest('.image-presupuesto').toggleClass('selected');

        element.trigger('change');
    }


    #handlePapelCubierta(event) {
        // Accede al ID del elemento que disparó el evento
        const element = $(event.target);

        let class2Find = '.papel-cubierta';

        let containers = element.closest(class2Find).parent().find(class2Find);
        for (let container of containers) {
            if (container != element.closest(class2Find)[0]) {
                $(container).removeClass('selected');
                $(container).find('.image-presupuesto').removeClass('selected');
            }
        }

        element.closest(class2Find).toggleClass('selected');
        element.closest('.image-presupuesto').toggleClass('selected');

        element.trigger('change');
    }

    #handleMenuTipoCubierta() {

        if (this.tapaBlanda.hasClass("selected")) {
            this.divSolapas.removeClass("d-none");
            this.divCarasImpresion.removeClass("d-none");
            this.divConfigTapaDura.addClass("d-none");
        }
        else if (this.tapaDuraLomoRecto.hasClass("selected") || this.tapaDuraLomoRedondo.hasClass("selected")) {
            this.solapasCubierta.removeClass("selected");
            this.divSolapas.addClass("d-none");
            this.divCarasImpresion.addClass("d-none");
            this.divConfigTapaDura.removeClass("d-none");
            this.#handleMenuPapel();

        }
        else {
            this.divSolapas.addClass("d-none");
            this.divCarasImpresion.addClass("d-none");
            this.divConfigTapaDura.addClass("d-none");
            this.#handleMenuPapel();
        }
    }


    #handleMenuSolapas() {

        if (this.conSolapas.hasClass("selected")) {
            this.divTamanioSolapas.removeClass("d-none");
        }
        else {
            this.divTamanioSolapas.addClass("d-none");
        }
    }

    #handleMenuPapel() {

        $(".check-gramaje-cubierta").prop("checked", false);

        if (!this.tapaBlanda.hasClass("selected") && !this.tapaDuraLomoRecto.hasClass("selected") && !this.tapaDuraLomoRedondo.hasClass("selected")) {
            this.divGramajeCubierta.addClass("d-none");
            this.estucadoMate.removeClass("selected");
            this.cartulinaEstucada.removeClass("selected");
            return;
        }

        if (this.cartulinaEstucada.hasClass("selected")) {
            this.divGramajeCubierta.removeClass("d-none");
            this.gramaje170.addClass("d-none");
            this.gramaje250.removeClass("d-none");
            this.gramaje270.removeClass("d-none");
            this.gramaje300.removeClass("d-none");
            this.gramaje350.removeClass("d-none");
        }
        else if (this.estucadoMate.hasClass("selected")) {
            if (this.tapaBlanda.hasClass("selected")) {
                this.divGramajeCubierta.removeClass("d-none");
                this.gramaje170.addClass("d-none");
                this.gramaje250.removeClass("d-none");
                this.gramaje270.addClass("d-none");
                this.gramaje300.removeClass("d-none");
                this.gramaje350.removeClass("d-none");
            }
            else {
                this.divGramajeCubierta.removeClass("d-none");
                this.gramaje170.removeClass("d-none");
                this.gramaje250.addClass("d-none");
                this.gramaje270.addClass("d-none");
                this.gramaje300.addClass("d-none");
                this.gramaje350.addClass("d-none");

                $('#gramaje170Cubierta').trigger("click");
            }
        }
    }


    #handleTamanioSolapas() {

        const min = parseInt(this.tamanioSolapasCubierta[0].min);
        const max = parseInt(this.tamanioSolapasCubierta[0].max);

        if (this.tamanioSolapasCubierta.val() < min || this.tamanioSolapasCubierta.val() == '' || isNaN(this.tamanioSolapasCubierta.val())) {
            this.tamanioSolapasCubierta.val(min);
        }

        else if (this.tamanioSolapasCubierta.val() > max)
            this.tamanioSolapasCubierta.val(max);
    }

    #handleClickGramaje(customOption) {

        const el = customOption[0];

        if (el.checked) {
            // If custom option element is radio, remove checked from the siblings (closest `.row`)
            if (el.type === 'radio') {
                const customRadioOptionList = [].slice.call(el.closest('.row').querySelectorAll('.custom-option'))
                customRadioOptionList.map(function (customRadioOptionEL) {
                    customRadioOptionEL.closest('.custom-option').classList.remove('checked')
                })
            }
            el.closest('.custom-option').classList.add('checked')
        } else {
            el.closest('.custom-option').classList.remove('checked')
        }
    }

    #handleInputs() {

        const id = $(this).attr('id');
        const min = parseInt($('#' + id).attr('min'));
        const max = parseInt($('#' + id).attr('max'));

        if ($('#' + id).val() < min || $('#' + id).val() == '' || isNaN($('#' + id).val())) {
            $('#' + id).val(min);
        }

        else if ($('#' + id).val() > max)
            $('#' + id).val(max);
    }
}


export default DisenioCubierta;