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

"use client"

import { useState } from "react"

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"

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

function createComparison(levelA: Level, levelB: Level) {
  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 (
            <PerkCard
              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}>
      <Title
        as="h1"
        level="h1"
        className={styles.title}
        weight="semiBold"
        uppercase
      >
        {_("7 delightful levels of friendship")}
      </Title>
      <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 Level
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              options={levelOptions}
              defaultOption={selectedLevelB.tier}
              onChange={handleSelectChangeB}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelB.tier
                ) as Level
              }
            />
          </div>
        </div>
        {createComparison(selectedLevelA, selectedLevelB)}
      </div>
    </div>
  )
}

type SelectProps = {
  options: {
    label: string
    value: number
  }[]
  defaultOption: number
  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
}

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>
  )
}

type Level = {
  tier: number
  name: string
  description: string
  requirement: string
  icon: string
  benefits: [
    {
      name: string
      description: string
      unlocked: boolean
      value?: string
      valueDetails?: string
    },
  ]
}

type LevelSummaryProps = {
  level: Level
}

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>
  )
}

type PerkCardProps = {
  comparedValues: {
    a: { unlocked: boolean; value?: string; valueDetails?: string }
    b: { unlocked: boolean; value?: string; valueDetails?: string }
  }
  title: string
  description: string
}
function PerkCard({ comparedValues, title, description }: PerkCardProps) {
  return (
    <div className={styles.perkCard}>
      <div className={styles.perkInfo}>
        <details className={styles.details}>
          <summary className={styles.summary}>
            <hgroup className={styles.perkCardHeader}>
              <Title as="h5" level="h2" className={styles.perkCardTitle}>
                {title}
              </Title>
              <span className={styles.chevron}>
                <ChevronDown />
              </span>
            </hgroup>
          </summary>
          <p className={styles.perkCardDescription}>{description}</p>
        </details>
      </div>
      <div className={styles.perkComparison}>
        <div className={styles.comparisonItem}>
          <PerkValue benefit={comparedValues.a} />
        </div>
        <div className={styles.comparisonItem}>
          <PerkValue benefit={comparedValues.b} />
        </div>
      </div>
    </div>
  )
}

function PerkValue({
  benefit,
}: {
  benefit: {
    unlocked: boolean
    value?: string
    valueDetails?: string
  }
}) {
  if (!benefit.unlocked) {
    return "-"
  }
  if (!benefit.value) {
    return <CheckCircle height={32} width={32} />
  }
  return (
    <div className={styles.perkValueContainer}>
      <span className={styles.perkValue}>{benefit.value}</span>
      {benefit.valueDetails && (
        <span className={styles.perkValueDetails}>{benefit.valueDetails}</span>
      )}
    </div>
  )
}