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

"use client"

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

import { Lang } from "@/constants/languages"
import { _ } from "@/lib/translation"

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

import levelsData from "./data/EN.json"
import BenefitCard from "./BenefitCard"

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

import {
  ComparisonLevel,
  LevelSummaryProps,
  OverviewTableTitleProps,
} 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 OverviewTableTitle({ texts }: OverviewTableTitleProps) {
  return (
    <Title as="h1" level="h1" weight="semiBold" uppercase>
      {texts.map(({ text, highlight }, idx) => (
        <Fragment key={idx}>
          <span className={highlight ? styles.highlight : ""}>{text}</span>
          {idx < texts.length - 1 && " "}
        </Fragment>
      ))}
    </Title>
  )
}

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

function createComparison(levels: ComparisonLevel[]) {
  const highestTier = levels.reduce(
    (acc: ComparisonLevel | null, level: ComparisonLevel) => {
      if (!acc) {
        return level
      }
      return level.tier > acc.tier ? level : acc
    },
    null
  )

  return highestTier?.benefits
    .filter((benefit) => benefit.unlocked)
    .map((benefit, idx) => {
      const levelBenefits = levels.map((level) => level.benefits[idx])
      return (
        <div key={benefit.name} className={styles.benefitCardWrapper}>
          <div className={styles.firstColumn} />
          <div className={styles.secondColumn} />
          <BenefitCard
            title={benefit.name}
            description={benefit.description}
            comparedValues={levelBenefits.map((benefit) => {
              return {
                value: benefit.value,
                unlocked: benefit.unlocked,
                valueDetails: benefit.valueDetails,
              }
            })}
          />
        </div>
      )
    })
}

export default function OverviewTable() {
  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={"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={"Level"}
                items={levelOptions}
                defaultSelectedKey={selectedLevelB.tier}
                onSelect={handleSelectChange(setSelectedLevelB)}
              />
              <LevelSummary
                level={
                  levelsData.levels.find(
                    (level) => level.tier === selectedLevelB.tier
                  ) as ComparisonLevel
                }
              />
            </div>
          </div>
          {createComparison([selectedLevelA, selectedLevelB])}
        </div>
        <div className={styles.columns}>
          <div className={styles.columnHeaderContainer}>
            <div className={styles.columnHeader}>
              <Select
                name={"benefitA"}
                label={"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={"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={"Level"}
                items={levelOptions}
                defaultSelectedKey={selectedLevelC.tier}
                onSelect={handleSelectChange(setSelectedLevelC)}
              />
              <LevelSummary
                level={
                  levelsData.levels.find(
                    (level) => level.tier === selectedLevelC.tier
                  ) as ComparisonLevel
                }
              />
            </div>
          </div>
          {createComparison([selectedLevelA, selectedLevelB, selectedLevelC])}
        </div>
      </div>
    </>
  )
}

function LevelSummary({ level }: LevelSummaryProps) {
  return (
    <div className={styles.levelSummary}>
      <Image src={level.icon} alt={level.name} height={50} width={100} />
      <span className={styles.levelRequirements}>{level.requirement}</span>
      <p className={styles.levelSummaryText}>{level.description}</p>
    </div>
  )
}