let hintTimer;
let isScanned = false;

$(document).ready(function () {
  $(".input_type_str1").mask("000000-00-00000000000");
  $(".input_type_str2").mask("000-00000000-00000000");
  $(".input_type_str3").mask("00000-000000-000");
  $(".input_type_str4").mask("0000000000");
  $(".input").trigger("paste");
  const checkTicketData = JSON.parse(localStorage.getItem("checkTicketData"));
  if (checkTicketData) {
    $(".input_type_str1").val(checkTicketData.str1);
    $(".input_type_str2").val(checkTicketData.str2);
    $(".input_type_str3").val(checkTicketData.str3);
    $(".input_type_str4").val(checkTicketData.str4);
    $(".input").trigger("input");
    const types = Array.from(document.querySelectorAll("#type-lottery option"))
      .reverse()
      .map((item) => item.textContent);
    $(".customSelect").text(types[checkTicketData.isWager]);
    $(".select-content").hide();
    $(".select-content").removeClass("active");
    $(`#select-content--${checkTicketData.isWager}`).addClass(`active`);
    $(`#select-content--${checkTicketData.isWager}`).show();
    isScanned = checkTicketData.isScanned || false;
    localStorage.removeItem("checkTicketData");
  }
  if (LANGUAGE == "kz-KZ") {
    $(".tabs__buttons").addClass("tabs__buttons_fit");
  }
  initQRCodeScanner();
});

function initQRCodeScanner() {
  if (!checkMobileDevice()) return;

  const configs = {
    draw: {
      inputNames: ["str1", "str2"],
      first: { start: 0, end: 19 },
      second: { start: 19 },
    },
    momental: {
      inputNames: ["str3", "str4"],
      first: { start: 0, end: 14 },
      second: { start: 14 },
    },
  };

  const buttons = document.querySelectorAll("[data-qr-for]");
  buttons.forEach((button) => {
    const config = button.dataset.qrFor;

    if (!config) throw new Error("Не указан config");

    button.addEventListener("click", () => createQRScanner(configs[config]));
  });
}

function createQRScanner(inputConfig) {
  const str1 = $(`input[name="${inputConfig.inputNames[0]}"]`);
  const str2 = $(`input[name="${inputConfig.inputNames[1]}"]`);
  const videoContainer = document.getElementById("qr-reader");
  videoContainer.classList.add("active");
  const html5QrCode = new Html5Qrcode("qr-reader");

  document.body.style = "overflow: hidden";

  const config = {
    fps: 15,
    qrbox: { width: window.innerWidth, height: window.innerHeight },
    videoConstraints: {
      facingMode: { exact: "environment" },
    },
  };
  html5QrCode
    .start({ facingMode: "environment" }, config, (decodedText) => {
      if (navigator.vibrate) navigator.vibrate(100);
      let textStr1 = decodedText.substring(
        inputConfig.first.start,
        inputConfig.first.end,
      );
      let textStr2 = decodedText.substring(inputConfig.second.start);
      str1.val(textStr1);
      str2.val(textStr2);
      $(".input").trigger("input");
      isScanned = true;
      //   $("#checkTicketForm").trigger("submit");
      document.body.style = "overflow: scroll";
      videoContainer.classList.remove("active");

      html5QrCode
        .stop()
        .then((ignore) => {
          // QR Code scanning is stopped.
        })
        .catch((err) => {
          // Stop failed, handle it.
        });
    })
    .catch((err) => {
      console.error("Ошибка камеры:", err);
      document.body.style = "overflow: scroll";
      videoContainer.classList.remove("active");

      html5QrCode
        .stop()
        .then((ignore) => {
          // QR Code scanning is stopped.
        })
        .catch((err) => {
          // Stop failed, handle it.
        });
    });
}

function showHint(element, window) {
  if (element.className.includes("info-mark__icon--1")) {
    if (window) {
      const template = `
            <div class="modal__papper-image-wrapper">
                <img class="modal__papper-image modal__papper-image--first" src="https://lotoclub.sz.kz/static/image/checkticket/hint.png" alt="image of hint">
            </div>
            <p class="modal__papper-title">Где посмотреть номер?</p>
            <p class="modal__papper-subtitle">Номер билета тиражной лотереи находится <span>на лицевой стороне чека</span>, который выдается при покупке в точке продаж.</p>
            `;
      createModal("modal__papper", template);
      return;
    }
  } else if (element.className.includes("info-mark__icon--2")) {
    if (window) {
      const template = `
            <div class="modal__papper-image-wrapper">
                <img class="modal__papper-image modal__papper-image--second" src="https://lotoclub.sz.kz/static/image/checkticket/hint-2.png" alt="image of hint">
            </div>
            <p class="modal__papper-title">Где посмотреть номер?</p>
            <p class="modal__papper-subtitle"><span>Номер билета</span> моментальной лотереи находится в правой части билета.</p>
            <p class="modal__papper-subtitle"><span>Валидационный код</span> находится внутри игрового поля, под защитным слоем.</p>
            `;
      createModal("modal__papper", template);
      return;
    }
  }
  //Вывод подсказок

  let dropdown = $(element).parent().children(".info-mark__dropdown"); //Получаем контейнер
  clearTimeout(hintTimer); //Очищаем таймер если был нажат.
  dropdown.toggleClass("info-mark__dropdown_active"); //Меняем в зависимости от того показан или нет
  $(element).attr("src").includes("quest-icon-active")
    ? element.attr("src", "https://lotoclub.sz.kz/static/image/icons/quest-icon.svg")
    : element.attr(
        "src",
        "https://lotoclub.sz.kz/static/image/icons/quest-icon-active.svg",
      );
  if (screen.width < 1024) {
    //Таймер для мобил и планшетов
    hint = setTimeout(() => {
      dropdown.removeClass("info-mark__dropdown_active"); //Удаляем класс
      $(element).attr("src").includes("quest-icon-active")
        ? element.attr("src", "https://lotoclub.sz.kz/static/image/icons/quest-icon.svg")
        : element.attr(
            "src",
            "https://lotoclub.sz.kz/static/image/icons/quest-icon-active.svg",
          );
    }, 5000);
  }
}

function showNextPage(data) {
  const mainContainer = document.querySelector(".check-ticket");
  const template = document.querySelector("#nextPage");
  $("check-ticket").addClass("w-360");
  if (data.response && data.response.typeEx == 5 && data.response.type == 8) {
    $(".error-maximum-attempts").show();
  } else if (data.response && data.response.typeEx == 5) {
    setErrorToInput(data.response.typeEx, "Неверные данные");
  } else if (data.response && data.response["error_msg"]) {
    setErrorToInput(5, data.response["error_msg"]);
  } else if (
    data.response &&
    (data.response.typeEx == 0 ||
      data.response.typeEx == 1 ||
      data.response.typeEx == 2 ||
      data.response.typeEx == 3 ||
      data.response.typeEx == 4)
  ) {
    $(".check-ticket .container").hide();
    document.querySelector(".check-ticket__form").reset();
    mainContainer.append(template.content.cloneNode(true));
    if (data.isWager === 1) {
      $(".check__num-str1").append(data.str1.replace(/-/g, "<span> - </span>"));
      $(".check__num-str2").append(data.str2.replace(/-/g, "<span> - </span>"));
    } else {
      $(".check__num-str1").append(data.str1.replace(/-/g, "<span> - </span>"));
      $(".check__num-str2").append(
        `<span class="valid-code">Валидационный код:</span> ${data.str2.replace(
          / /g,
          "<span> - </span>",
        )}`,
      );
    }
    if (data.response.typeEx == 1) {
      $(".check__win-summ").text(
        `${Intl.NumberFormat("ru-RU").format(data.response.amount)} ₸`,
      );

      if (data.response.type == 3) {
        $(".paid-to-wallet").show();
        $(".button-no-win").show();
      } else {
        $(".button-pay").show();
        $(".button-pay").click(() => {
          payTicket(
            data.isWager,
            data.str1,
            data.str2,
            data.response.typeEx,
            data.isScanned,
          );
        });
      }
      return;
    }
    if (data.response.typeEx == 2) {
      $(".check__win-summ").text(
        `${Intl.NumberFormat("ru-RU").format(data.response.amount)} ₸`,
      );
      if (data.response.type == 3) {
        $(".paid-to-wallet").show();
        $(".button-no-win").show();
      } else {
        $(".no-documments").show();
        $(".button-pay").click(() => {
          payTicket(data.isWager, data.str1, data.str2, data.response.typeEx);
        });
      }
      return;
    }
    if (data.response.typeEx == 3) {
      $(".check__win-summ").text(
        `${Intl.NumberFormat("ru-RU").format(data.response.amount)} ₸`,
      );

      if (data.response.type == 3) {
        $(".paid-to-wallet").show();
      } else {
        $(".documments").show();
        $(".button-pay").click(() => {
          payTicket(
            data.isWager,
            data.str1,
            data.str2,
            data.response.typeEx,
            data.isScanned,
          );
        });
      }
      return;
    }
    if (data.response.typeEx == 4) {
      $(".check__win-summ").text(
        `${Intl.NumberFormat("ru-RU").format(data.response.amount)} ₸`,
      );

      if (data.response.type == 3) {
        $(".paid-to-wallet").show();
      } else $(".check__address").show();
      return;
    }

    if (data.response.typeEx != 0) {
      $(".check__win-summ").text(
        `${Intl.NumberFormat("ru-RU").format(data.response.amount)} ₸`,
      );

      $(".button-pay").click(() => {
        payTicket(
          data.isWager,
          data.str1,
          data.str2,
          data.response.typeEx,
          data.isScanned,
        );
      });
    } else {
      $(".button-no-win").show();
      $(".button-pay").remove();
      $(".check__win-summ").text(0 + " ₸");
    }
  } else {
    showError("Что то пошло не так");
    return;
  }
}

function showPrevPage() {
  $(".next-page").remove();
  $(".check-ticket .container").show();
}

if (screen.width <= "1024") {
  //Магия для мобил
  $(".profile__modal .personal-data__info-mark").on("click", (e) => {
    //По клику подсказка
    showHint($(e.target));
  });
} else {
  $(".profile__modal .personal-data__info-mark").on("mouseenter", (e) => {
    //По наведению подсказка для больших экранов.
    showHint($(e.target));
  });
  $(".profile__modal .personal-data__info-mark").on("mouseleave", (e) => {
    showHint($(e.target));
  });
}

// 1: 'Еще не сыграл',
// 2: 'Не выйграл',
// 3: 'Выигрыш уже выплачен',
// 4: 'Выйгрыш не выплачен',
// 5: 'Приз больше не может бытьыплачен',
// 6: 'Обратитесь за выйгрышем вцентр',
// 7: 'Превышено кол-во попыток',

function payTicket(isWager, str1, str2, type, isScanned) {
  let str1Replace = str1.replace(/-/g, "");
  let str2Replace = str2.replace(/-/g, "");
  let buttonSubmit = document.querySelector(".button-pay");

  blockButton(buttonSubmit);
  $.ajax({
    url: `https://lotoclub.sz.kz/srvNew?srv=payTicket&isWager=${isWager}&str1=${str1Replace}&str2=${str2Replace}${isScanned ? "&isScanned=1" : ""}`,
    type: "POST",
    success: () => {},
    error: () => {},
    complete: (data) => {
      let result = JSON.parse(data.responseText);
      unBlockButton(buttonSubmit);
      if (result.status !== "OK") {
        showError(result.msg ? result.msg : "Что-то пошло не так");
        return;
      } else {
        if (result.type == 10) {
          $(".payment-request-sent").show();
          $(".button-pay").remove();
        } else {
          localStorage.setItem("checkTicketSum", result.amount);
          $(".check__win-enlisted").show();
          $(".button-wrapper").show();
          $(".button-pay").remove();
        }
      }
    },
  });
}

$("#checkTicketForm").on("submit", async (e) => {
  e.preventDefault();

  let form = document.querySelector("#checkTicketForm");
  let str1 = form.elements.str1;
  let str2 = form.elements.str2;
  let str1Replace = str1.value.replace(/-/g, "");
  let str2Replace = str2.value.replace(/-/g, "");
  let buttonSubmit = document.querySelector(
    "#checkTicketForm .check-ticket__button",
  );

  blockButton(buttonSubmit);
  if (typeof window.gib !== "undefined") {
    window.gib.setAttribute(
      "failedTicketCheckAttempt",
      `${str1}/${str2}/${Date.now()}`,
      {
        memory: false,
        encryption: "sha1",
      },
    );
  }
  if (istmUserId()) {
    const response = await asyncSendToSRVNew({
      srv: "checkTicket",
      isWager: 1,
      str1: str1Replace,
      str2: str2Replace,
      isScanned: isScanned,
    });

    if (response.status !== "OK") {
      showError(result.msg ? result.msg : "Что-то пошло не так");
      unBlockButton(buttonSubmit);
      return;
    } else {
      const data = {
        response: response,
        str1: str1.value,
        str2: str2.value,
        isWager: 1,
        isScanned: isScanned,
      };
      isScanned = false;
      unBlockButton(buttonSubmit);
      showNextPage(data);
    }
  } else {
    localStorage.setItem(
      "checkTicketData",
      JSON.stringify({
        str1: str1.value,
        str2: str2.value,
        isWager: 1,
        isScanned: isScanned,
      }),
    );
    window.location.href = "https://lotoclub.sz.kz/login?back=checkticket";
  }
});

$("#checkTicketForm2").on("submit", (e) => {
  e.preventDefault();
  let form = document.querySelector("#checkTicketForm2");
  let str1 = form.elements.str3;
  let str2 = form.elements.str4;
  let str1Replace = str1.value.replace(/-/g, "");
  let str2Replace = str2.value.replace(/-/g, "");
  let buttonSubmit = document.querySelector("#checkTicketForm2 button");

  blockButton(buttonSubmit);

  if (istmUserId()) {
    $.ajax({
      url: `https://lotoclub.sz.kz/srvNew?srv=checkTicket&isWager=0&str1=${str1Replace}&str2=${str2Replace}${
        isScanned ? "&isScanned=1" : ""
      }`,
      type: "GET",
      success: () => {},
      error: () => {},
      complete: (data) => {
        let result = JSON.parse(data.responseText);
        unBlockButton(buttonSubmit);
        if (result.status !== "OK") {
          showError(result.msg ? result.msg : "Что-то пошло не так");
          return;
        } else {
          const data = {
            response: result,
            str1: str1.value,
            str2: str2.value,
            isWager: 0,
            isScanned: isScanned,
          };
          isScanned = false;
          showNextPage(data);
        }
      },
    });
  } else {
    localStorage.setItem(
      "checkTicketData",
      JSON.stringify({
        str3: str1.value,
        str4: str2.value,
        isWager: 0,
        isScanned: isScanned,
      }),
    );
    window.location.href = "https://lotoclub.sz.kz/login?back=checkticket";
  }
});

function createModal(className, template) {
  disableScroll();
  $("body").append(`<div class="modal__content" style="display: none;"></div>`);
  $("body").append('<div class="modal" style="display: none"></div>');
  $(".modal__content").append(
    '<img class="mobile-close-auth" src="https://lotoclub.sz.kz/static/image/checkticket/close-modal-icon.svg"><img src="https://lotoclub.sz.kz/static/image/checkticket/close-modal-icon.svg" role="button" class="modal__close-icon modal__close-papper">',
  );
  $(".modal__content").append(`<div class="${className}">${template}</div?`);
  $(".modal__content").slideToggle(200);
  $(".modal").fadeIn(300);
  $(".modal, .modal__close-icon, .mobile-close-auth").click((e) => {
    $(".modal__content").slideToggle(200);
    $(".modal").fadeOut(200, "", () => {
      closeModal("modal", "modal__content");
      enableScroll();
    });
  });
}

$("div[data-tab]").on("click", function () {
  let tabId = $(this).attr("data-tab");
  $("div[data-tab]").each(function (i, a) {
    $(a).removeClass("active");
    $(`div[data-content="${a.dataset.tab}"`).addClass("hidden");
    if (a.dataset.tab == tabId) {
      $(a).addClass("active");
      $(`div[data-content="${tabId}"`).removeClass("hidden");
    }
  });
});

// Кастомные селекты
$(".select").each(function () {
  let $this = $(this),
    numberOfOptions = $(this).children("option").length;

  let numberOfSelects = $("select").length;

  $this.addClass("elmnt-hidden");

  $this.wrap('<div class="select"></div>');

  $this.after('<div class="customSelect"></div>');

  let $customSelect = $this.next("div.customSelect");

  $customSelect.text($this.children("option").eq(0).text());

  let $list = $("<ul />").insertAfter($customSelect);

  for (let i = 0; i < numberOfOptions; i++) {
    $("<li />", {
      text: $this.children("option").eq(i).text(),
      rel: $this.children("option").eq(i).val(),
    }).appendTo($list);
  }

  let $listItems = $list.children("li");

  $customSelect.click(function (e) {
    e.stopPropagation();

    if ($(this).hasClass("active")) {
      $(this).removeClass("active");
      $("div.customSelect").next("div.options").hide();

      $("div.customSelect")
        .not(this)
        .parent(".select")
        .removeClass("select-nonActive");

      if ($(this).text() == "") {
        $(this).parent(".select").removeClass("formEdited");
      } else {
        $(this).parent(".select").addClass("formEdited");
      }
    } else {
      $(this).addClass("active");
      $(this).parent(".select").addClass("select-active");
      $("div.customSelect")
        .not(this)
        .parent(".select")
        .removeClass("select-active");

      $("div.customSelect")
        .not(this)
        .removeClass("active")
        .next("div.options")
        .hide();
      $(this)
        .closest(".form-group")
        .nextAll()
        .children(".select")
        .addClass("select-nonActive");

      $customSelect.parent(".select").removeClass("select-nonActive");
      $customSelect.next("div.options").show();

      for (let i = 0; i <= numberOfSelects; i++) {
        if ($("div.customSelect").eq(i).text() == "") {
          $("div.customSelect")
            .eq(i)
            .not(this)
            .parent(".select")
            .removeClass("formEdited");
        } else {
          $("div.customSelect")
            .eq(i)
            .not(this)
            .parent(".select")
            .addClass("formEdited");
        }
      }
      $customSelect.parent(".select").addClass("formEdited");
    }
  });

  $listItems.click(function (e) {
    e.stopPropagation();
    $customSelect.text($(this).text()).removeClass("active");
    $("div.customSelect").parent(".select").removeClass("select-nonActive");
    $("div.customSelect").parent(".select").removeClass("select-active");
    let selectedOption = $(this).attr("rel");
    $this.val($(this).attr("rel"));
    $("div.options").hide();

    $(".select-content").hide();
    $(".select-content").removeClass("active");
    $(`#select-content--${selectedOption}`).addClass(`active`);
    $(`#select-content--${selectedOption}`).show();
  });

  $list.wrap('<div class="options"></div>');

  $(document).click(function () {
    $("div.customSelect").removeClass("active");
    $("div.customSelect").parent(".select").removeClass("select-nonActive");
    $("div.customSelect").parent(".select").removeClass("select-active");
    $("div.options").hide();
    for (let i = 0; i <= numberOfSelects; i++) {
      if ($("div.customSelect").eq(i).text() == "") {
        $("div.customSelect").eq(i).parent(".select").removeClass("formEdited");
      }
    }
  });
});