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"

const defaultCardProps = {
  title: "title",
  description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
  comparedValues: { a: false, b: true },
}

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

  function handleSelectChangeA(event: React.ChangeEvent<HTMLSelectElement>) {
    setSelectedLevelA(event.target.value)
  }

  function handleSelectChangeB(event: React.ChangeEvent<HTMLSelectElement>) {
    setSelectedLevelB(event.target.value)
  }

  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}
              onChange={handleSelectChangeA}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => `${level.tier}` === selectedLevelA
                ) as Level
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              options={levelOptions}
              defaultOption={selectedLevelB}
              onChange={handleSelectChangeB}
            />
            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => `${level.tier}` === selectedLevelB
                ) as Level
              }
            />
          </div>
        </div>
        <PerkCard {...defaultCardProps} />
        <PerkCard {...defaultCardProps} />
        <PerkCard {...defaultCardProps} />
      </div>
    </div>
  )
}

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

function Select({ options, defaultOption, onChange }: SelectProps) {
  return (
    <div className={styles.selectContainer}>
      <select className={styles.select} onChange={onChange}>
        {options.map((option) => (
          <option
            key={option.label}
            value={option.value}
            selected={option.value === defaultOption}
          >
            {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
}

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: boolean | string
    b: boolean | string
  }
  title: string
  description: string
}
function PerkCard({ comparedValues, title, description }: PerkCardProps) {
  const [isExpanded, setIsExpanded] = useState(false)
  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}>
          {comparedValues.a ? <CheckCircle /> : "-"}
        </div>
        <div className={styles.comparisonItem}>
          {comparedValues.b ? <CheckCircle /> : "-"}
        </div>
      </div>
    </div>
  )
}