const data = { isRender: false }

function setup() {
    renderGoogleContainer();

    let status;

    $('#phone').mask('+7 (000) 000 00 00', {
        oninvalid: (e) => {
            if (e) {
                validate(document.querySelector("#phone"));
            }
        }
    });

    $("#send-sms-phone").mask("+7 (000) 000 00 00", {
        oninvalid: (e) => {
            if (e) {
                validate(document.querySelector("#send-sms-phone"));
            }
        }
    })

    $("#blockFormInputIIN").mask("000000000000");
    $("#blockRequestIIN").mask("000000000000");

    $('[data-button-action="open-block-request"]').on("click", () => {
        const title = document.querySelector("#title");

        document.querySelector("#blockRequestIIN").value = document.querySelector("#blockFormInputIIN").value;
        document.querySelector("#send-sms-phone").value = document.querySelector("#phone").value;

        title.innerHTML = "Заявление <br/> на блокировку аккаунта";
        hideStatusBlock(status.code);
        showBlockRequest();
    })

    $('[data-button-action="open-main"]').on("click", () => {
        document.location = "https://sz.kz"
    });

    $("#NUL").on("input ", handleInputDocNum);

    $("#phone").on("blur", handleBlurPhone);
    $("#phone").on("focus", handleFocusPhone)
    $("#phone").on("input", handleInputPhoneCheckBlock);

    $("#blockFormInputIIN").on("input", handleInputIinCheckBlock)
    $("#blockFormInputIIN").on("blur", handleBlurIIN);
    $("#blockFormInputIIN").on("focus", handleFocusIIN);

    $("#send-sms-phone").on("blur", handleBlurPhone);
    $("#send-sms-phone").on("focus", handleFocusPhone);
    $("#send-sms-phone").on("input", handleInputPhoneSmsBlock);

    $("#blockRequestIIN").on("input", handleInputIinSmsBlock);
    $("#blockRequestIIN").on("blur", handleBlurIIN);
    $("#blockRequestIIN").on("focus", handleFocusIIN);

    $("#front-side").on("change", handleChangeFile);
    $("#back-side").on("change", handleChangeFile);
    $("#user-side").on("change", handleChangeFile);

    $("#send-sms-code").on("input", handleOTPCode)
    $("#FIO").on("input", handleInputCEO);

    $("#blockInfo").on("submit", async (event) => {
        event.preventDefault();
        const { target } = event;
        const { iin, phone } = target;

        const token = recaptchaKey
            ? await grecaptcha
                .execute("6LecosUbAAAAAB1gP5n4kIxYrQeZrXJN4FjA2fpj", { action: "submit" })
                .then(gcCallback)
            : "";

        status = await checkBlockStatus(iin.value, phone.value, token);

        if (!status) {
            return;
        }

        const title = document.querySelector("#title");
        title.innerHTML = "Статус заявления";
        hideForm();
        showStatusBlock(status.code);

        const reason = document.querySelector(".reason");
        reason.textContent = status.reason;
    })

    $("#blockSendSMS").on("submit", async (event) => {
        event.preventDefault();
        const iin = document.querySelector("#blockRequestIIN");
        const phone = document.querySelector("#send-sms-phone")
        const resendInfo = document.querySelector(".resend-code");
        const button = document.querySelector("#send-otp-code")

        const token = recaptchaKey
            ? await grecaptcha
                .execute("6LecosUbAAAAAB1gP5n4kIxYrQeZrXJN4FjA2fpj", { action: "submit" })
                .then(gcCallback)
            : "";

        let response = await sendSmsCode(iin.value, phone.value, token)

        if (response.status === "ok") {
            resendInfo.classList.add("d-none");

            blockButton(button);
            addSmsTimer(90);
        }
    });

    $("#submit-block-request").on("click", async () => {
        const formData = new FormData();

        const phoneVal = document.querySelector("#send-sms-phone").value;
        const iinVal = document.querySelector("#blockRequestIIN").value;

        const frontSide = document.querySelector("#front-side").files[0];
        const backSide = document.querySelector("#back-side").files[0];
        const userSide = document.querySelector("#user-side").files[0];

        const otpCode = document.querySelector("#send-sms-code").value;
        const ceo = document.querySelector("#FIO").value
        const docNum = document.querySelector("#NUL").value;

        const token = recaptchaKey
            ? await grecaptcha
                .execute("6LecosUbAAAAAB1gP5n4kIxYrQeZrXJN4FjA2fpj", { action: "submit" })
                .then(gcCallback)
            : "";

        formData.set("blPhone", phoneVal);
        formData.set("blIIN", iinVal);
        formData.set("blCode", otpCode);
        formData.set("blFront", frontSide);
        formData.set("blBack", backSide);
        formData.set("blPhoto", userSide);
        formData.set("blCeo", ceo);
        formData.set("blDocNumber", docNum);
        formData.set("blGoogleToken", token);

        console.log(formData);

        const resp = await sendFilledFormData(formData, "blLoad", true);

        console.log(resp);

        if (resp) {
            hideBlockRequest();
            showFinal();
        }
    })

    $("#confirm-checkbox").on("change", (event) => {
        console.log(event.target.checked);
        changeBlockDisableButton();
    })
}

function addSmsTimer(val, srv, captchakey) {
    const sendAgain = document.querySelector('.send-sms-button');
    const resendInfo = document.querySelector(".resend-code");
    const resendPhone = resendInfo.querySelector(".resend-phone");
    const phone = document.querySelector("#send-sms-phone");

    console.log(resendPhone);

    sendAgain.setAttribute('disabled', true);
    sendAgain.classList.add('button-grey');
    sendAgain.innerHTML = `Отправить код еще раз<span class="sms-timer-span">${val} сек</span>`;

    let smsTimer = setInterval(() => {
        if (val == 1 || val < 1) {
            resendInfo.classList.remove("d-none")

            resendPhone.textContent = phone.value;

            sendAgain.removeAttribute('disabled');
            sendAgain.classList.remove('button-grey');
            sendAgain.querySelector('span').remove();

            console.log("cleared");
            clearInterval(smsTimer);
        } else {
            val--;
            sendAgain.querySelector('span').textContent = `${val} сек`;
        }
    }, 1000);
}

function hideForm() {
    $("#blockInfo").hide();
}

function showStatusBlock(code) {
    $(`[data-status="${code}"]`).show();
}

function hideStatusBlock(code) {
    $(`[data-status="${code}"]`).hide();
}

function showBlockRequest() {
    $("#blockRequest").show();
}

function hideBlockRequest() {
    $("#blockRequest").hide();
}

function showFinal() {
    $("#block-final").show();
}

function gcCallback(token) {
    return token;
}

function renderGoogleContainer() {
    //Отрисовка гугл капчи, параметр это className.
    const captchaContainer = document.querySelector(`.main-g-captcha`);

    if (recaptchaKey && !data.isRender) {
        data.isRender = !data.isRender;
        grecaptcha.ready(function () {
            recaptchaWidget = grecaptcha.render(captchaContainer, { sitekey: "6LecosUbAAAAAB1gP5n4kIxYrQeZrXJN4FjA2fpj" });
        });
    }
}

function handleBlurIIN(event) {
    const { target } = event;
    const span = target.parentNode.querySelector(".block-input-message");

    if (target.value.length < 12) {
        span.classList.add("span-error");
        span.classList.remove("span-input-focused")
        span.textContent = "Введите ИИН полностью";
        target.classList.add("input-invalid");
    }
}

function handleFocusIIN(event) {
    const { target } = event;
    const span = target.parentNode.querySelector(".block-input-message");

    span.classList.remove("span-error");
    span.classList.add("span-input-focused")
    span.textContent = "ИИН";
    target.classList.remove("input-invalid");
}

function handleBlurPhone(event) {
    const { target } = event;
    const span = target.parentNode.querySelector(".block-input-message");

    if (target.value.length < 18) {
        span.classList.add("span-error");
        span.classList.remove("span-input-focused")
        span.textContent = "Введите телефон полностью";
        target.classList.add("input-invalid");
    }
}

function handleFocusPhone(event) {
    const { target } = event;
    const span = target.parentNode.querySelector(".block-input-message");

    span.classList.remove("span-error");
    span.classList.add("span-input-focused")
    span.textContent = "Номер телефона";
    target.classList.remove("input-invalid");
}

function changeCheckDisableButton() {
    const phoneVal = document.querySelector("#phone").value;
    const iinVal = document.querySelector("#blockFormInputIIN").value;
    const submit = document.querySelector("#blockInfo button");

    if (iinVal.length < 12 || phoneVal.length < 18) {
        submit.setAttribute("disabled", "true");
    } else {
        submit.removeAttribute("disabled")
    }
}

function changeSmsDisableButton() {
    const phoneVal = document.querySelector("#send-sms-phone").value;
    const iinVal = document.querySelector("#blockRequestIIN").value;
    const sendOtpCode = document.querySelector("#send-otp-code");

    if (iinVal.length < 12 || phoneVal.length < 18) {
        sendOtpCode.setAttribute("disabled", "true");
    } else {
        sendOtpCode.removeAttribute("disabled")
    }
}

function handleOTPCode() {
    changeBlockDisableButton();
}

function handleInputCEO() {
    changeBlockDisableButton();
}

function changeBlockDisableButton() {
    const phoneVal = document.querySelector("#send-sms-phone").value;
    const iinVal = document.querySelector("#blockRequestIIN").value;

    const frontSide = document.querySelector("#front-side").files[0];
    const backSide = document.querySelector("#back-side").files[0];
    const userSide = document.querySelector("#user-side").files[0];

    const otpCode = document.querySelector("#send-sms-code").value;
    const ceo = document.querySelector("#FIO").value
    const docNum = document.querySelector("#NUL").value;

    const checkbox = document.querySelector("#confirm-checkbox").checked

    const submit = document.querySelector("#submit-block-request")

    if (
        !checkbox ||
        !ceo ||
        !docNum ||
        otpCode.length < 4 ||
        !frontSide ||
        !backSide ||
        !userSide ||
        phoneVal.length < 18 ||
        iinVal.length < 12
    ) {
        submit.setAttribute("disabled", "true")
    } else {
        submit.removeAttribute("disabled")
    }
}

function handleInputPhoneCheckBlock(event) {
    changeCheckDisableButton();
}

function handleInputPhoneSmsBlock(event) {
    changeSmsDisableButton();
    changeBlockDisableButton();
}

function handleInputIinCheckBlock(event) {
    changeCheckDisableButton();
}

function handleInputIinSmsBlock(event) {
    changeSmsDisableButton();
    changeBlockDisableButton();
}

function handleInputDocNum(event) {
    const { target } = event;

    if (/[^a-zA-Z0-9]/gm.test(target.value)) {
        target.value = target.value.slice(0, target.value.length - 1);
        return;
    };

    changeBlockDisableButton();
}

function handleChangeFile(event) {
    const { target } = event;
    const maxSize = 1024 * 1024 * 5;

    if (target.files[0].size > maxSize) {
        showError("Объем загружаемого файла должен быть не более 5 МБ");
        target.value = null;
        target.classList.remove("uploaded");

        const label = target.parentNode.querySelector(".upload-input + label");

        label.innerHTML = `
            <svg class="upload-icon" width="27" height="27" viewBox="0 0 27 27" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M13.5 0C6.0558 0 0 6.0558 0 13.5C0 20.9442 6.0558 27 13.5 27C20.9442 27 27 20.9442 27 13.5C27 6.0558 20.9442 0 13.5 0Z"
                    fill="#2B5DA8" fill-opacity="0.1" />
                <path d="M10.8008 10.8001L14.0408 7.56006L17.2808 10.8001" stroke="#292D32"
                    stroke-width="1.62" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M14.041 7.56006V16.2001" stroke="#292D32" stroke-width="1.62"
                    stroke-linecap="round" stroke-linejoin="round" />
                <path d="M7.56055 18.3599C11.7617 19.7639 16.3193 19.7639 20.5205 18.3599"
                    stroke="#292D32" stroke-width="1.62" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        `
    }

    if (target.files[0]) {
        target.classList.add("uploaded");
        const label = target.parentNode.querySelector(".uploaded + label");

        label.innerHTML = `
            <svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.2507 22.9173C18.9798 22.9173 23.6673 18.2298 23.6673 12.5007C23.6673 6.77148 18.9798 2.08398 13.2507 2.08398C7.52148 2.08398 2.83398 6.77148 2.83398 12.5007C2.83398 18.2298 7.52148 22.9173 13.2507 22.9173Z" stroke="#079C30" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8.82227 12.4997L11.7702 15.4476L17.6764 9.55176" stroke="#079C30" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        `
    }

    changeBlockDisableButton();
}

async function checkBlockStatus(iin, phone, token = "") {
    try {
        const data = await asyncSendToSRVNew({
            srv: "blCheck",
            phone: phone,
            iin: iin,
            tmLanguage: getCookie("tmLanguage"),
            googleToken: token
        });

        console.log(data);

        if (data.status.toLowerCase() === "error") {
            throw new Error(data.msg);
        }

        return { code: data.blState, status: data.status, reason: data.blCause }
    } catch (error) {
        console.log(error.message);

        return false;
    }
}

async function sendSmsCode(iin, phone, token = "") {
    const data = await asyncSendToSRVNew({
        srv: "blSendSMS",
        phone: phone,
        inn: iin,
        tmLanguage: getCookie("tmLanguage"),
        googleToken: token
    });

    if (data === false) {
        return { status: "error" }
    }

    return { status: "ok" }
}

setup();