web/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

"use client"

import { Dispatch, SetStateAction, useState } from "react"
import { type Key } from "react-aria-components"
import { useIntl } from "react-intl"

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

import Select from "@/components/TempDesignSystem/Form/Select"

import levelsData from "./data/EN.json"
import BenefitList from "./BenefitList"
import LevelSummary from "./LevelSummary"
import OverviewTableTitle from "./Title"

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

import { ComparisonLevel } from "@/types/components/loyalty/blocks"

// These should ultimately be fetched from Contentstack
const titleTranslations = {
  [Lang.en]: [
    { text: "7 delightful levels", highlight: true },
    { text: "of friendship", highlight: false },
  ],
  // TODO: Add translations for the following languages
  [Lang.da]: [
    { text: "7 delightful levels", highlight: true },
    { text: "of friendship", highlight: false },
  ],
  [Lang.no]: [
    { text: "7 delightful levels", highlight: true },
    { text: "of friendship", highlight: false },
  ],
  [Lang.sv]: [
    { text: "7 delightful levels", highlight: true },
    { text: "of friendship", highlight: false },
  ],
  [Lang.fi]: [
    { text: "7 delightful levels", highlight: true },
    { text: "of friendship", highlight: false },
  ],
  [Lang.de]: [
    { text: "7 delightful levels", highlight: true },
    { text: "of friendship", highlight: false },
  ],
}

function getLevelByTier(tier: number) {
  return levelsData.levels.find(
    (level) => level.tier === tier
  ) as ComparisonLevel
}

export default function OverviewTable() {
  const intl = useIntl()
  const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
  const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
  const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))

  function handleSelectChange(
    callback: Dispatch<SetStateAction<ComparisonLevel>>
  ) {
    return (key: Key) => {
      if (typeof key === "number") {
        const level = getLevelByTier(key)
        callback(level)
      }
    }
  }

  const levelOptions = levelsData.levels.map((level) => ({
    label: level.name,
    value: level.tier,
  }))

  return (
    <div className={styles.container}>
      <div className={styles.intro}>
        <OverviewTableTitle texts={titleTranslations[Lang.en]} />
        <p className={styles.preamble}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu risus
          quis varius quam quisque id diam vel. Rhoncus urna neque viverra
          justo. Mattis aliquam faucibus purus in massa. Id cursus metus aliquam
          eleifend mi in nulla posuere.
        </p>
      </div>
      <div className={styles.mobileColumns}>
        <div className={styles.columnHeaderContainer}>
          <div className={styles.columnHeader}>
            <Select
              name="benefitA"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              defaultSelectedKey={selectedLevelA.tier}
              onSelect={handleSelectChange(setSelectedLevelA)}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelA.tier
                ) as ComparisonLevel
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              name="benefitB"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              defaultSelectedKey={selectedLevelB.tier}
              onSelect={handleSelectChange(setSelectedLevelB)}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelB.tier
                ) as ComparisonLevel
              }
            />
          </div>
        </div>
        <BenefitList levels={[selectedLevelA, selectedLevelB]} />
      </div>
      <div className={styles.columns}>
        <div className={styles.columnHeaderContainer}>
          <div className={styles.columnHeader}>
            <Select
              name="benefitA"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              defaultSelectedKey={selectedLevelA.tier}
              onSelect={handleSelectChange(setSelectedLevelA)}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelA.tier
                ) as ComparisonLevel
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              name="benefitB"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              defaultSelectedKey={selectedLevelB.tier}
              onSelect={handleSelectChange(setSelectedLevelB)}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelB.tier
                ) as ComparisonLevel
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              name="benefitC"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              defaultSelectedKey={selectedLevelC.tier}
              onSelect={handleSelectChange(setSelectedLevelC)}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelC.tier
                ) as ComparisonLevel
              }
            />
          </div>
        </div>
        <BenefitList
          levels={[selectedLevelA, selectedLevelB, selectedLevelC]}
        />
      </div>
    </div>
  )
}