"use client"

import { useIntl } from "react-intl"

import { Lang, languages } from "@/constants/languages"
import useDropdownStore from "@/stores/main-menu"

import { CheckIcon, ChevronLeftIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { useTrapFocus } from "@/hooks/useTrapFocus"

import styles from "./languageSwitcherContent.module.css"

import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"

export default function LanguageSwitcherContent({
  urls,
  type,
}: LanguageSwitcherProps) {
  const intl = useIntl()
  const currentLanguage = useLang()
  const { toggleLanguageSwitcher } = useDropdownStore()
  const languageSwitcherRef = useTrapFocus()
  const urlKeys = Object.keys(urls) as Lang[]

  return (
    <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
      {type === "mobileHeader" ? (
        <div className={styles.backWrapper}>
          <button
            type="button"
            className={styles.backButton}
            onClick={toggleLanguageSwitcher}
          >
            <ChevronLeftIcon color="red" />
            <Subtitle type="one">Main Menu</Subtitle>
          </button>
        </div>
      ) : null}

      <div className={styles.languageWrapper}>
        <Subtitle className={styles.subtitle} type="two">
          {intl.formatMessage({ id: "Select your language" })}
        </Subtitle>
        <ul className={styles.list}>
          {urlKeys.map((key) => {
            const url = urls[key]?.url
            const isActive = currentLanguage === key
            if (url) {
              return (
                <li key={key}>
                  <Link
                    className={`${styles.link} ${isActive ? styles.active : ""}`}
                    href={url}
                  >
                    {languages[key]}
                    {isActive ? <CheckIcon color="burgundy" /> : null}
                  </Link>
                </li>
              )
            }
          })}
        </ul>
      </div>
    </div>
  )
}