"use client"

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

import { Lang } from "@/constants/languages"

import { CheckIcon } from "@/components/Icons"
import {
  BestFriend,
  CloseFriend,
  DearFriend,
  GoodFriend,
  LoyalFriend,
  NewFriend,
  TrueFriend,
} from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

import levelsData from "./data"

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

import type { Level, LevelCardProps } from "@/types/components/loyalty/blocks"

export default function LoyaltyLevels() {
  const params = useParams()
  const lang = params.lang as Lang
  const { formatMessage } = useIntl()

  const { levels } = levelsData[lang]
  return (
    <section className={styles.container}>
      <div className={styles.cardContainer}>
        {levels.map((level: Level) => (
          <LevelCard
            key={level.level}
            formatMessage={formatMessage}
            lang={lang}
            level={level}
          />
        ))}
      </div>
      <Button asChild intent="primary">
        <Link className={styles.link} href={`/${lang}/compare-all-levels`}>
          {formatMessage({ id: "Compare all levels" })}
        </Link>
      </Button>
    </section>
  )
}

function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
  const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
  const qualifications = level.requiredNights
    ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
    : pointsString

  let Level = null
  switch (level.level) {
    case 1:
      Level = NewFriend
      break
    case 2:
      Level = GoodFriend
      break
    case 3:
      Level = CloseFriend
      break
    case 4:
      Level = DearFriend
      break
    case 5:
      Level = LoyalFriend
      break
    case 6:
      Level = TrueFriend
      break
    case 7:
      Level = BestFriend
      break
  }
  return (
    <article className={styles.card}>
      <Title className={styles.tierHeading} level="h4">
        {level.level}
      </Title>
      {Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
      <div className={styles.textContainer}>
        <Body textTransform="bold">{qualifications}</Body>
        {level.benefits.map((benefit) => (
          <Body key={benefit.title} textAlign="center">
            <CheckIcon className={styles.checkIcon} />
            {benefit.title}
          </Body>
        ))}
      </div>
    </article>
  )
}
