import { langArr } from "./LangArray";
import wlBrokerLangArray from "../wlBrokerLangArray";
import { affiliateBrokerLangArr } from "../affiliate_broker/affiliateBrokerLangArray";
import { whiteLabelBrokerageLangArray } from "../white_label_brokerage/whiteLabelBrokerageLangArray";
import { digitalCurrencyBrokerageLangArray } from "../digital-currency-brokerage/digitalCurrencyBrokerageLangArray";
import { affiliateLangArr } from "../affiliate/affiliateLangArray";
import { freeBrokerageLangArray } from "../free-brokerage/freeBrokerageLangArray.js";
import { clickOutside } from "../../../helpers/click-outside";

const changeLang = (allLang, lngItems, btnText) => {
  const wlBroker = document.getElementById("wl-broker");
  const aBroker = document.getElementById("affiliate-broker");
  const wlBrokerage = document.getElementById("white-label-brokerage");
  const dcBrokerage = document.getElementById("digital-currency-brokerage");
  const affiliate = document.getElementById("affiliate");
  const freeBrokerage = document.getElementById("free-brokerage");

  let url = new URL(window.location);
  let hash = url.hash;

  hash = hash.substr(1) || "en";

  if (!allLang.includes(hash)) {
    hash = "en";
  }
  localStorage.setItem("form__lang", hash);

  allLang.forEach((lang) => {
    document.body.classList.remove(`lang-${lang}`);
  });

  document.body.classList.add(`lang-${hash}`);

  lngItems.forEach((item) => item.classList.remove("active"));

  lngItems.forEach((item) => {
    if (item.dataset.lng === hash) {
      item.classList.add("active");
      btnText.innerHTML = item.innerHTML;
    }
  });

  let array = langArr;

  if (wlBroker) {
    array = wlBrokerLangArray;
  }
  if (aBroker) {
    array = affiliateBrokerLangArr;
  }
  if (wlBrokerage) {
    array = { ...affiliateBrokerLangArr, ...whiteLabelBrokerageLangArray };
  }
  if (dcBrokerage) {
    array = {
      ...affiliateBrokerLangArr,
      ...whiteLabelBrokerageLangArray,
      ...digitalCurrencyBrokerageLangArray,
    };
  }
  if (affiliate) {
    array = { ...affiliateBrokerLangArr, ...affiliateLangArr };
  }

  if (freeBrokerage) {
    array = freeBrokerageLangArray;
  }

  for (let key in array) {
    let elements = document.querySelectorAll(`[data-lang="lng-${key}"]`);
    elements.forEach((elem) => {
      if (elem) {
        const type = elem.dataset.langType;
        switch (type) {
          case "img":
            elem.src = array[key][hash] ? array[key][hash] : array[key]["en"];
            break;
          case "link":
            elem.href = array[elem.dataset.langLink][hash];
            elem.innerHTML = array[key][hash]
              ? array[key][hash]
              : array[key]["en"];
            break;
          case "input":
            elem.placeholder = array[key][hash]
              ? array[key][hash]
              : array[key]["en"];
            break;
          case "description":
            elem.content = array[key][hash]
              ? array[key][hash]
              : array[key]["en"];
            break;
          default:
            elem.innerHTML = array[key][hash]
              ? array[key][hash]
              : array[key]["en"];
            break;
        }
      }
    });
  }
};

export const Lang = () => {
  const wlBroker = document.getElementById("wl-broker");
  const affiliate = document.getElementById("affiliate");
  const affiliateTraffic = document.getElementById("affiliate-traffic");
  const affiliateBroker = document.getElementById("affiliate-broker");
  const wlBrokerage = document.getElementById("white-label-brokerage");
  const dcBrokerage = document.getElementById("digital-currency-brokerage");
  const freeBrokerage = document.getElementById("free-brokerage");

  let allLang = ["en", "es", "pt", "ko", "ja"];

  if (wlBroker) {
    allLang = ["en", "pt", "th"];
  }

  if (affiliateTraffic) {
    allLang = ["en", "es", "pt", "ko", "ja", "ru", "th"];
  }

  if (affiliate) {
    allLang = ["en", "es", "pt", "th"];
  }

  if (affiliateBroker || wlBrokerage || dcBrokerage) {
    allLang = ["en", "es", "pt", "th", "vi"];
  }

  if (freeBrokerage) {
    allLang = ["en", "pt", "es", "id"];
  }

  const changeLngs = document.querySelectorAll(".change-lng");

  const linkAllChangeLngs = (callback) => {
    changeLngs.forEach((item) => {
      const lngItems = item.querySelectorAll(".change-lng__item");
      const btnText = item.querySelector(".change-lng__btnText");
      callback(item, lngItems, btnText);
    });
  };

  if (!changeLngs || changeLngs.lenght === 0) return false;

  changeLngs.forEach((changeLng) => {
    const btn = changeLng.querySelector(".change-lng__btn");
    const btnText = changeLng.querySelector(".change-lng__btnText");
    const lngItems = changeLng.querySelectorAll(".change-lng__item");

    if (!btn) return false;

    btn.addEventListener("click", (event) => {
      event.stopPropagation();
      if (changeLng.classList.contains("active")) {
        changeLng.classList.remove("active");
      } else {
        changeLng.classList.add("active");
      }
    });
    document.addEventListener("click", (event) => {
      clickOutside(changeLng, (event) => {
        if (changeLng.classList.contains("active")) {
          changeLng.classList.remove("active");
        }
      });
    });
    document.addEventListener("scroll", () => {
      if (changeLng.classList.contains("active")) {
        changeLng.classList.remove("active");
      }
    });

    lngItems.forEach((item) => {
      item.addEventListener("click", () => {
        const usedLang = item.getAttribute("data-lng");

        linkAllChangeLngs((_, lngItems, btnText) => {
          lngItems.forEach((item) => item.classList.remove("active"));
          const item = Array.from(lngItems).find(
            (lngItem) => lngItem.attributes["data-lng"].nodeValue === usedLang
          );
          item?.classList.add("active");
          changeLng.classList.remove("active");

          btnText.innerHTML = item.t;
          if (usedLang === "en") {
            localStorage.setItem("form__lang", "en");
            location.href = window.location.pathname;
          } else {
            localStorage.setItem("form__lang", usedLang);
            location.href = window.location.pathname + "#" + usedLang;
          }
          changeLang(allLang, lngItems, btnText);
        });
      });
    });

    changeLang(allLang, lngItems, btnText);
  });
};