"use strict";

// Class definition
var KTCreateAccount = (function () {
    // Elements
    var modal;
    var modalEl;

    var stepper;
    var form;
    var formSubmitButton;
    var formContinueButton;

    // Variables
    var stepperObj;
    var validations = [];

    // Private Functions
    var initStepper = function () {
        // Initialize Stepper
        stepperObj = new KTStepper(stepper);

        // Stepper change event
        stepperObj.on("kt.stepper.changed", function (stepper) {
            if (stepperObj.getCurrentStepIndex() === 4) {
                formSubmitButton.classList.remove("d-none");
                formSubmitButton.classList.add("d-inline-block");
                formContinueButton.classList.add("d-none");
            } else if (stepperObj.getCurrentStepIndex() === 5) {
                formSubmitButton.classList.add("d-none");
                formContinueButton.classList.add("d-none");
            } else {
                formSubmitButton.classList.remove("d-inline-block");
                formSubmitButton.classList.remove("d-none");
                formContinueButton.classList.remove("d-none");
            }
        });

        // Validation before going to next page
        stepperObj.on("kt.stepper.next", function (stepper) {
            console.log("stepper.next");

            // Validate form before change stepper step
            var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step

            if (validator) {
                validator.validate().then(function (status) {
                    console.log("validated!");

                    if (status == "Valid") {
                        stepper.goNext();

                        KTUtil.scrollTop();
                    } else {
                        Swal.fire({
                            text: "?????? ???? ??? ?? ?????? ??? ???????? ???? ???????? ??? ????.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "?????? ????!",
                            customClass: {
                                confirmButton: "btn btn-light",
                            },
                        }).then(function () {
                            KTUtil.scrollTop();
                        });
                    }
                });
            } else {
                stepper.goNext();

                KTUtil.scrollTop();
            }
        });

        // Prev event
        stepperObj.on("kt.stepper.previous", function (stepper) {
            console.log("stepper.previous");

            stepper.goPrevious();
            KTUtil.scrollTop();
        });
    };

    var handleForm = function () {
        formSubmitButton.addEventListener("click", function (e) {
            // Validate form before change stepper step
            var validator = validations[3]; // get validator for last form

            validator.validate().then(function (status) {
                console.log("validated!");

                if (status == "Valid") {
                    // Prevent default button action
                    e.preventDefault();

                    // Disable button to avoid multiple click
                    formSubmitButton.disabled = true;

                    // Show loading indication
                    formSubmitButton.setAttribute("data-kt-indicator", "on");

                    // Simulate form submission
                    setTimeout(function () {
                        // Hide loading indication
                        formSubmitButton.removeAttribute("data-kt-indicator");

                        // Enable button
                        formSubmitButton.disabled = false;

                        stepperObj.goNext();
                    }, 2000);
                } else {
                    Swal.fire({
                        text: "?????? ???? ??? ?? ?????? ??? ???????? ???? ???????? ??? ????.",
                        icon: "error",
                        buttonsStyling: false,
                        confirmButtonText: "?????? ????!",
                        customClass: {
                            confirmButton: "btn btn-light",
                        },
                    }).then(function () {
                        KTUtil.scrollTop();
                    });
                }
            });
        });

        // Expiry month. For more info, plase visit the official plugin site: https://select2.org/
        $(form.querySelector('[name="card_expiry_month"]')).on(
            "change",
            function () {
                // Revalidate the field when an option is chosen
                validations[3].revalidateField("card_expiry_month");
            }
        );

        // Expiry year. For more info, plase visit the official plugin site: https://select2.org/
        $(form.querySelector('[name="card_expiry_year"]')).on(
            "change",
            function () {
                // Revalidate the field when an option is chosen
                validations[3].revalidateField("card_expiry_year");
            }
        );

        // Expiry year. For more info, plase visit the official plugin site: https://select2.org/
        $(form.querySelector('[name="business_type"]')).on(
            "change",
            function () {
                // Revalidate the field when an option is chosen
                validations[2].revalidateField("business_type");
            }
        );
    };

    var initValidation = function () {
        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
        // Step 1
        validations.push(
            FormValidation.formValidation(form, {
                fields: {
                    account_type: {
                        validators: {
                            notEmpty: {
                                message: "Account type is required",
                            },
                        },
                    },
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: ".fv-row",
                        eleInvalidClass: "",
                        eleValidClass: "",
                    }),
                },
            })
        );

        // Step 2
        validations.push(
            FormValidation.formValidation(form, {
                fields: {
                    account_team_size: {
                        validators: {
                            notEmpty: {
                                message: "Time size is required",
                            },
                        },
                    },
                    account_name: {
                        validators: {
                            notEmpty: {
                                message: "Account name is required",
                            },
                        },
                    },
                    account_plan: {
                        validators: {
                            notEmpty: {
                                message: "Account plan is required",
                            },
                        },
                    },
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    // Bootstrap Framework Integration
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: ".fv-row",
                        eleInvalidClass: "",
                        eleValidClass: "",
                    }),
                },
            })
        );

        // Step 3
        validations.push(
            FormValidation.formValidation(form, {
                fields: {
                    business_name: {
                        validators: {
                            notEmpty: {
                                message: "Busines name is required",
                            },
                        },
                    },
                    business_descriptor: {
                        validators: {
                            notEmpty: {
                                message: "Busines descriptor is required",
                            },
                        },
                    },
                    business_type: {
                        validators: {
                            notEmpty: {
                                message: "Busines type is required",
                            },
                        },
                    },
                    business_email: {
                        validators: {
                            notEmpty: {
                                message: "Busines email is required",
                            },
                            emailAddress: {
                                message:
                                    "?????? ???? ????? ???? ???????? ??????",
                            },
                        },
                    },
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    // Bootstrap Framework Integration
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: ".fv-row",
                        eleInvalidClass: "",
                        eleValidClass: "",
                    }),
                },
            })
        );

        // Step 4
        validations.push(
            FormValidation.formValidation(form, {
                fields: {
                    card_name: {
                        validators: {
                            notEmpty: {
                                message: "Name on card is required",
                            },
                        },
                    },
                    card_number: {
                        validators: {
                            notEmpty: {
                                message: "Card member is required",
                            },
                            creditCard: {
                                message: "Card number is not valid",
                            },
                        },
                    },
                    card_expiry_month: {
                        validators: {
                            notEmpty: {
                                message: "Month is required",
                            },
                        },
                    },
                    card_expiry_year: {
                        validators: {
                            notEmpty: {
                                message: "Year is required",
                            },
                        },
                    },
                    card_cvv: {
                        validators: {
                            notEmpty: {
                                message: "CVV is required",
                            },
                            digits: {
                                message: "CVV must contain only digits",
                            },
                            stringLength: {
                                min: 3,
                                max: 4,
                                message: "CVV must contain 3 to 4 digits only",
                            },
                        },
                    },
                },

                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    // Bootstrap Framework Integration
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: ".fv-row",
                        eleInvalidClass: "",
                        eleValidClass: "",
                    }),
                },
            })
        );
    };

    return {
        // Public Functions
        init: function () {
            // Elements
            modalEl = document.querySelector("#kt_modal_create_account");

            if (modalEl) {
                modal = new bootstrap.Modal(modalEl);
            }

            stepper = document.querySelector("#kt_create_account_stepper");

            if (!stepper) {
                return;
            }

            form = stepper.querySelector("#kt_create_account_form");
            formSubmitButton = stepper.querySelector(
                '[data-kt-stepper-action="submit"]'
            );
            formContinueButton = stepper.querySelector(
                '[data-kt-stepper-action="next"]'
            );

            initStepper();
            initValidation();
            handleForm();
        },
    };
})();

// On document ready
KTUtil.onDOMContentLoaded(function () {
    KTCreateAccount.init();
});