"use client"

import { notFound, 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 BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "@/data/loyaltyLevels"

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

import type { Level, LevelCardProps } from "@/types/components/content/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.cardContainer}>
      {levels.map((level: Level) => (
        <LevelCard
          key={level.level}
          formatMessage={formatMessage}
          lang={lang}
          level={level}
        />
      ))}
    </section>
  )
}

function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
  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
    default: {
      const loyaltyLevel = level.level as never
      console.error(`Unsupported loyalty level given: ${loyaltyLevel}`)
      notFound()
    }
  }
  const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "points" })} `

  return (
    <article className={styles.card}>
      <header>
        <BiroScript
          type="two"
          color="primaryLightOnSurfaceAccent"
          tilted="large"
        >
          {formatMessage({ id: "Level" })} {level.level}
        </BiroScript>
        <Level color="red" />
      </header>
      <Title textAlign="center" level="h5">
        {pointsString}
        {level.requiredNights ? (
          <span className={styles.redText}>
            {formatMessage({ id: "or" })} {level.requiredNights}{" "}
            {formatMessage({ id: "nights" })}
          </span>
        ) : null}
      </Title>
      <div className={styles.textContainer}>
        {level.benefits.map((benefit) => (
          <Caption
            className={styles.levelText}
            key={benefit.title}
            textAlign="center"
            color="textMediumContrast"
          >
            <CheckIcon
              className={styles.checkIcon}
              color="primaryLightOnSurfaceAccent"
            />
            {benefit.title}
          </Caption>
        ))}
      </div>
    </article>
  )
}