import { applyLang, bindHeader } from "../bd-static/shared.js";

const languages = [
  { type: "en", value: "English", dir: "ltr" },
  { type: "ar", value: "اللغة العربية", dir: "rtl" },
  { type: "tr", value: "Türkçe", dir: "ltr" },
  { type: "bn", value: "বাংলা", dir: "ltr" }
];

bindHeader("language");
applyLang();
render();

function selectedType() {
  const stored = localStorage.getItem("preferred-language");
  if (languages.some((item) => item.type === stored)) return stored;
  const navLang = (navigator.language || "en").split("-")[0];
  return languages.some((item) => item.type === navLang) ? navLang : "en";
}

function render() {
  const current = selectedType();
  const list = document.getElementById("languageList");
  list.innerHTML = languages.map((item) => `
    <button class="language-row" type="button" data-lang="${item.type}">
      <span>${item.value}</span>
      <span class="selected-check ${current === item.type ? "selected-check--active" : ""}"></span>
    </button>
  `).join("");
  list.querySelectorAll("[data-lang]").forEach((button) => {
    button.addEventListener("click", () => switchLanguage(button.dataset.lang));
  });
}

function switchLanguage(type) {
  const target = languages.find((item) => item.type === type);
  if (!target) return;
  localStorage.setItem("preferred-language", target.type);
  document.documentElement.lang = target.type;
  document.documentElement.dir = target.dir;
  if (window.history.length > 1) {
    window.history.back();
    return;
  }
  window.location.replace("/");
}