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

"use client"

import { useState } from "react"

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

import CheckCircle from "@/components/Icons/CheckCircle"
import ChevronDown from "@/components/Icons/ChevronDown"
import Image from "@/components/Image"
import Title from "@/components/Title"

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

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

import {
  BenefitCardProps,
  BenefitValueProps,
  ComparisonLevel,
  LevelSummaryProps,
} 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 },
  ],
}

type TitleTranslation = {
  text: string
  highlight: boolean
}

type OverviewTableTitleProps = { texts: TitleTranslation[] }

function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
  return (
    <Title
      as="h1"
      level="h1"
      className={styles.title}
      weight="semiBold"
      uppercase
    >
      {texts.map(({ text, highlight }, idx) => (
        <>
          <span key={idx} className={highlight ? styles.highlight : ""}>
            {text}
          </span>
          {idx < texts.length - 1 && " "}
        </>
      ))}
    </Title>
  )
}

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

function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
  const comparedLevels = [levelA, levelB].sort(
    (a, b) => a.benefits.length - b.benefits.length
  )

  return (
    <>
      {comparedLevels[1].benefits
        .filter((benefit) => benefit.unlocked)
        .map((benefit, idx) => {
          const aBenefit = comparedLevels[0].benefits[idx]
          const bBenefit = comparedLevels[1].benefits[idx]
          return (
            <BenefitCard
              key={benefit.name}
              title={benefit.name}
              description={benefit.description}
              comparedValues={{
                a: {
                  unlocked: aBenefit.unlocked,
                  value: aBenefit.value,
                  valueDetails: aBenefit.valueDetails,
                },
                b: {
                  unlocked: bBenefit.unlocked,
                  value: bBenefit.value,
                  valueDetails: bBenefit.valueDetails,
                },
              }}
            />
          )
        })}
    </>
  )
}

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

  // TODO Come up with a nice wat to make these two a single reusable function
  function handleSelectChangeA(event: React.ChangeEvent<HTMLSelectElement>) {
    const tier = parseInt(event.target.value)
    const level = getLevelByTier(tier)
    setSelectedLevelA(level)
  }

  function handleSelectChangeB(event: React.ChangeEvent<HTMLSelectElement>) {
    const tier = parseInt(event.target.value)
    const level = getLevelByTier(tier)
    setSelectedLevelB(level)
  }

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

  return (
    <div className={styles.container}>
      <OverviewTableTitle texts={titleTranslations[Lang.en]} />
      <div>
        <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.columns}>
        <div className={styles.leftColumn} />
        <div className={styles.rightColumn} />
        <div className={styles.columnHeaderContainer}>
          <div className={styles.columnHeader}>
            <Select
              options={levelOptions}
              defaultOption={selectedLevelA.tier}
              onChange={handleSelectChangeA}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelA.tier
                ) as ComparisonLevel
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              options={levelOptions}
              defaultOption={selectedLevelB.tier}
              onChange={handleSelectChangeB}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelB.tier
                ) as ComparisonLevel
              }
            />
          </div>
        </div>
        {createComparison(selectedLevelA, selectedLevelB)}
      </div>
    </div>
  )
}

type SelectProps = {
  options: {
    label: string
    value: number
  }[]
  defaultOption: number
  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
}
// TODO: replace with Select component from TempDesignSystem
function Select({ options, defaultOption, onChange }: SelectProps) {
  return (
    <div className={styles.selectContainer}>
      <select
        className={styles.select}
        onChange={onChange}
        defaultValue={defaultOption}
      >
        {options.map((option) => (
          <option key={option.label} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <label className={styles.selectLabel}>{_("Level")}</label>
      <span className={styles.selectChevron}>
        <ChevronDown />
      </span>
    </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>
  )
}

function BenefitCard({ comparedValues, title, description }: BenefitCardProps) {
  return (
    <div className={styles.benefitCard}>
      <div className={styles.benefitInfo}>
        <details className={styles.details}>
          <summary className={styles.summary}>
            <hgroup className={styles.benefitCardHeader}>
              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
                {title}
              </Title>
              <span className={styles.chevron}>
                <ChevronDown />
              </span>
            </hgroup>
          </summary>
          <p className={styles.benefitCardDescription}>{description}</p>
        </details>
      </div>
      <div className={styles.benefitComparison}>
        <div className={styles.comparisonItem}>
          <BenefitValue benefit={comparedValues.a} />
        </div>
        <div className={styles.comparisonItem}>
          <BenefitValue benefit={comparedValues.b} />
        </div>
      </div>
    </div>
  )
}

function BenefitValue({ benefit }: BenefitValueProps) {
  if (!benefit.unlocked) {
    return "-"
  }
  if (!benefit.value) {
    return <CheckCircle height={32} width={32} />
  }
  return (
    <div className={styles.benefitValueContainer}>
      <span className={styles.benefitValue}>{benefit.value}</span>
      {benefit.valueDetails && (
        <span className={styles.benefitValueDetails}>
          {benefit.valueDetails}
        </span>
      )}
    </div>
  )
}