"use client"

import { useEffect, useState } from "react"
import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"

import {
  customerService,
  faq,
  policies,
  rates,
} from "@scandic-hotels/common/constants/routes/customerService"
import { sasEuroBonus } from "@scandic-hotels/common/constants/routes/sasEuroBonus"
import Link from "@scandic-hotels/design-system/Link"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { LanguageSwitcher } from "@/components/LanguageSwitcher"
import useLang from "@/hooks/useLang"
import { routeToScandicWeb } from "@/util"

import styles from "./footer-menu.module.css"

export function FooterMenu() {
  const intl = useIntl()
  const lang = useLang()
  const checkIfMobile = useMediaQuery("(max-width: 767px)")
  const [isMobile, setIsMobile] = useState(false)

  useEffect(() => {
    setIsMobile(checkIfMobile)
  }, [checkIfMobile])

  return (
    <div className={styles.linksWrapper}>
      <div className={styles.links}>
        <Typography variant="Body/Paragraph/mdRegular">
          <Link
            href={routeToScandicWeb(customerService)[lang]}
            className={styles.link}
          >
            {intl.formatMessage({
              id: "common.contactUs",
              defaultMessage: "Contact us",
            })}
          </Link>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <Link href={routeToScandicWeb(faq)[lang]} className={styles.link}>
            {intl.formatMessage({
              id: "common.faq",
              defaultMessage: "FAQ",
            })}
          </Link>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <Link href={routeToScandicWeb(rates)[lang]} className={styles.link}>
            {intl.formatMessage({
              id: "partnerSas.footer.rates",
              defaultMessage: "Rates",
            })}
          </Link>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <Link
            href={routeToScandicWeb(policies)[lang]}
            className={styles.link}
          >
            {intl.formatMessage({
              id: "partnerSas.footer.policies",
              defaultMessage: "Policies",
            })}
          </Link>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <Link
            href={routeToScandicWeb(sasEuroBonus)[lang]}
            className={styles.link}
          >
            {intl.formatMessage({
              id: "partnerSas.sasEuroBonus",
              defaultMessage: "SAS EuroBonus",
            })}
          </Link>
        </Typography>
      </div>
      <LanguageSwitcher
        currentLanguage={lang}
        isMobile={isMobile}
        type="footer"
      />
    </div>
  )
}