class Checkout {
    constructor() {
        this.createPopup();
        this.handlePopup();
        this.selectedGateway();
        this.dynamicFieldToggleByCountry();
    }

    handlePopup() {

        const popup = document.querySelector("#koin-popup-about");
        if (popup) {
            popup.addEventListener("click", (e) => {
                if (e.target.id === "koin-popup-about") {
                    popup.classList.remove("koin-popup-about-active");
                }
            });
        }

        const input = document.querySelector("#payment_method_wc-koin-billet");
        if (input && popup) {
            input.addEventListener("change", () => {
                popup.classList.add("koin-popup-about-active");
            });
        }

        const close = document.querySelector("#koin-close-popup");
        if (close && popup) {
            close.addEventListener("click", () => {
                popup.classList.remove("koin-popup-about-active");
            });
        }

    }

    createPopup() {
        const context = document.createElement("div");
        context.setAttribute("id", "koin-popup-about");
        context.classList.add("koin-popup-about");

        const div = document.createElement("div");
        div.setAttribute("id", "koin-popup-about-content");

        const span = document.createElement("span");
        span.setAttribute("id", "koin-close-popup");
        span.innerHTML = "&times;";
        span.classList.add("close");

        const banner = document.createElement("koin-checkout-banner");

        div.appendChild(span);
        div.appendChild(banner);
        context.appendChild(div)

        const body = document.querySelector("body");
        body.appendChild(context);

    }

    selectedGateway() {
        const gateways = document.querySelectorAll('form.checkout input[name^="payment_method"]');

        gateways.forEach(gateway => {
            gateway.addEventListener('change', () => {
                const event = new Event('update_checkout');
                document.body.dispatchEvent(event)
            });
        });
    }

    dynamicFieldToggleByCountry() {
        const toggleFields = (fieldSelectors, isEnabled) => {
            fieldSelectors.forEach((selector) => {
                jQuery(selector).prop('disabled', !isEnabled).toggle(isEnabled);
            });
        };

        const checkPersonTypeAndCountry = () => {
            const country = jQuery('#billing_country').val();
            const personType = jQuery('#wc_koin_person_type').val();
            const documentTypeBr = jQuery('input[name="billing_document_type_br"]:checked').val();
            const docTypeAr = jQuery('#wc_koin_doctype_ar').val();
            const docTypeMx = jQuery('#wc_koin_doctype_mx').val();
            const docTypeCo = jQuery('#wc_koin_doctype_co').val();
            const docTypeCl = jQuery('#wc_koin_doctype_cl').val();
            const docTypePe = jQuery('#wc_koin_doctype_pe').val();
            const docTypeUy = jQuery('#wc_koin_doctype_uy').val();
            
            const allFields = [
                '#wc_koin_person_type_field',
                '#wc_koin_document_type_br_field',
                '#wc_koin_cpf_field',
                '#wc_koin_company_field',
                '#wc_koin_cnpj_field',
                '#wc_koin_passport_br_field',
                '#wc_koin_doctype_ar_field',
                '#wc_koin_dni_ar_field',
                '#wc_koin_passport_ar_field',
                '#wc_koin_doctype_mx_field',
                '#wc_koin_ci_mx_field',
                '#wc_koin_curp_field',
                '#wc_koin_rfc_field',
                '#wc_koin_passport_mx_field',
                '#wc_koin_doctype_co_field',
                '#wc_koin_cc_field',
                '#wc_koin_ce_co_field',
                '#wc_koin_passport_co_field',
                '#wc_koin_doctype_cl_field',
                '#wc_koin_ci_field',
                '#wc_koin_rut_field',
                '#wc_koin_passport_cl_field',
                '#wc_koin_doctype_pe_field',
                '#wc_koin_dni_pe_field',
                '#wc_koin_ce_pe_field',
                '#wc_koin_passport_pe_field',
                '#wc_koin_doctype_uy_field',
                '#wc_koin_ci_uy_field',
                '#wc_koin_passport_uy_field'
            ];
            toggleFields(allFields, false);

            if (country === 'BR') {
                toggleFields(['#wc_koin_person_type_field'], true);
                if (personType === '1') {
                    toggleFields(['#wc_koin_document_type_br_field'], true);
                    if (documentTypeBr === 'CPF') {
                        toggleFields(['#wc_koin_cpf_field'], true);
                    } else if (documentTypeBr === 'PASSPORT') {
                        toggleFields(['#wc_koin_passport_br_field'], true);
                    }
                } else if (personType === '2') {
                    toggleFields(['#wc_koin_cnpj_field', '#wc_koin_company_field'], true);
                }
            } else if (country === 'AR') {
                toggleFields(['#wc_koin_doctype_ar_field'], true);
                if (docTypeAr === 'DNI') {
                    toggleFields(['#wc_koin_dni_ar_field'], true);
                } else if (docTypeAr === 'PASSPORT') {
                    toggleFields(['#wc_koin_passport_ar_field'], true);
                }
            } else if (country === 'MX') {
                toggleFields(['#wc_koin_doctype_mx_field'], true);
                if (docTypeMx === 'INE') {
                    toggleFields(['#wc_koin_ci_mx_field'], true);
                } else if (docTypeMx === 'CURP') {
                    toggleFields(['#wc_koin_curp_field'], true);
                } else if (docTypeMx === 'RFC') {
                    toggleFields(['#wc_koin_rfc_field'], true);
                } else if (docTypeMx === 'PASSPORT') {
                    toggleFields(['#wc_koin_passport_mx_field'], true);
                }
            } else if (country === 'CO') {
                toggleFields(['#wc_koin_doctype_co_field'], true);
                if (docTypeCo === 'CC') {
                    toggleFields(['#wc_koin_cc_field'], true);
                } else if (docTypeCo === 'CE') {
                    toggleFields(['#wc_koin_ce_co_field'], true);
                } else if (docTypeCo === 'PASSPORT') {
                    toggleFields(['#wc_koin_passport_co_field'], true);
                }
            } else if (country === 'CL') {
                toggleFields(['#wc_koin_doctype_cl_field'], true);
                if (docTypeCl === 'CI') {
                    toggleFields(['#wc_koin_ci_field'], true);
                } else if (docTypeCl === 'RUT') {
                    toggleFields(['#wc_koin_rut_field'], true);
                } else if (docTypeCl === 'PASSPORT') {
                    toggleFields(['#wc_koin_passport_cl_field'], true);
                }
            } else if (country === 'PE') {
                toggleFields(['#wc_koin_doctype_pe_field'], true);
                if (docTypePe === 'DNI') {
                    toggleFields(['#wc_koin_dni_pe_field'], true);
                } else if (docTypePe === 'CE') {
                    toggleFields(['#wc_koin_ce_pe_field'], true);
                } else if (docTypePe === 'PASSPORT') {
                    toggleFields(['#wc_koin_passport_pe_field'], true);
                }
            } else if (country === 'UY') {
                toggleFields(['#wc_koin_doctype_uy_field'], true);
                if (docTypeUy === 'CI') {
                    toggleFields(['#wc_koin_ci_uy_field'], true);
                } else if (docTypeUy === 'PASSPORT') {
                    toggleFields(['#wc_koin_passport_uy_field'], true);
                }
            }
        };

        jQuery(document).ready(() => {
            checkPersonTypeAndCountry();
        });

        jQuery('body').on('change', '#billing_country, #wc_koin_person_type, input[name="billing_document_type_br"], #wc_koin_doctype_ar, #wc_koin_doctype_mx, #wc_koin_doctype_co, #wc_koin_doctype_cl, #wc_koin_doctype_pe, #wc_koin_doctype_uy', function () {
            checkPersonTypeAndCountry();
        });
    }
}

(function ($) {
    $(document).on("ready updated_checkout", () => {
        new Checkout;
    });
}(jQuery));

