"use client"

import { usePathname } from "next/navigation"
import { useIntl } from "react-intl"

import { languages } from "@scandic-hotels/common/constants/language"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "@/hooks/useLang"

import { replaceUrlPart } from "./utils"

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

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

export default function LanguageSwitcherContent({
  urls,
  onLanguageSwitch,
}: LanguageSwitcherContentProps) {
  const intl = useIntl()
  const currentLanguage = useLang()

  const urlKeys = (Object.keys(urls) as (keyof typeof urls)[]).sort((a, b) => {
    return languages[a].localeCompare(languages[b])
  })

  const pathname = usePathname()

  return (
    <div className={styles.languageWrapper}>
      <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
        <p>
          {intl.formatMessage({
            id: "common.selectYourLanguage",
            defaultMessage: "Select your language",
          })}
        </p>
      </Typography>
      <ul className={styles.list}>
        {urlKeys.map((key) => {
          const url = urls[key]?.url
          const isActive = currentLanguage === key

          if (url) {
            return (
              <li key={key}>
                <Typography
                  variant={
                    isActive
                      ? "Body/Paragraph/mdBold"
                      : "Body/Paragraph/mdRegular"
                  }
                >
                  <Link
                    className={styles.link}
                    href={replaceUrlPart(pathname, url)}
                    onClick={() => onLanguageSwitch(key)}
                    variant="languageSwitcher"
                    keepSearchParams
                  >
                    {languages[key]}
                    {isActive ? (
                      <MaterialIcon
                        icon="check"
                        color="Icon/Interactive/Default"
                      />
                    ) : null}
                  </Link>
                </Typography>
              </li>
            )
          }
        })}
      </ul>
    </div>
  )
}