import { localeToLang } from "@/constants/locales";
import { type Lang, langEnum } from "@/types/lang";
import { headers } from "next/headers";

export default function LangPopup({ lang }: { lang: Lang }) {
  const headersList = headers();
  const preferedLang = headersList.get("Accept-Language") ?? "";

  const possibleLocales = Object.keys(localeToLang);

  if (!possibleLocales.includes(preferedLang)) {
    return null;
  }

  //@ts-ignore
  const langOfChoice: Lang = localeToLang[preferedLang];

  if (langOfChoice === lang) {
    return null;
  }

  let language = "";
  let viewIn = "";

  switch (langOfChoice) {
    case langEnum.de:
      language = "Deutsch";
      viewIn = "Ansicht in";
      break;
    case langEnum.da:
      language = "Dansk";
      viewIn = "Se in";
      break;
    case langEnum.fi:
      language = "Suomi";
      viewIn = "Katso in";
      break;
    case langEnum.no:
      language = "Norsk";
      viewIn = "Se in";
      break;
    case langEnum.sv:
      language = "Svenska";
      viewIn = "Visa in";
      break;
  }

  return (
    <div className="lang-popup hidden" id="lang-popup">
      <a
        href="#"
        className="lang-popup__close"
        title="Close language change popup"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          style={{
            stroke: "#757575",
            width: "14px",
            height: "14px",
            display: "block",
            strokeWidth: "2px",
          }}
        >
          <title>Close</title>
          <g id="web-close" fill-rule="evenodd">
            <line x1="0" y1="0" x2="100%" y2="100%" />
            <line x1="0" y1="100%" x2="100%" y2="0" />
          </g>
        </svg>
      </a>
      <div className="lang-popup__body">
        <p className="lang-popup__msg">
          You are viewing our website in English, would you like to change to{" "}
          {language}?
        </p>
      </div>
      <div className="lang-popup__footer">
        <a href="" className="lang-popup__cta btn btn--primary">
          {viewIn} {language}
        </a>
        <a href="#" className="lang-popup__cancel btn btn--link">
          No thanks
        </a>
      </div>
    </div>
  );
}