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

"use client"

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

import { Lang } from "@/constants/languages"
import { membershipLevels } from "@/constants/membershipLevels"
import { trpc } from "@/lib/trpc/client"

import Image from "@/components/Image"
import Select from "@/components/TempDesignSystem/Form/Select"
import { getMembership } from "@/utils/user"

import levelsData from "./data/EN.json"
import BenefitList from "./BenefitList"
import LargeTable from "./LargeTable"
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()
  // TODO: Should isLoading be used for some loader, or is it fine to just use default values and rerender?
  // Also, since it's fine to not be authenticated, how should the error be handled?
  const { data, isLoading } = trpc.user.get.useQuery()

  const [selectedLevelAMobile, setSelectedLevelAMobile] = useState(
    getLevelByTier(1)
  )
  const [selectedLevelBMobile, setSelectedLevelBMobile] = useState(
    getLevelByTier(2)
  )

  const [selectedLevelADesktop, setSelectedLevelADesktop] = useState(
    getLevelByTier(1)
  )
  const [selectedLevelBDesktop, setSelectedLevelBDesktop] = useState(
    getLevelByTier(2)
  )
  const [selectedLevelCDesktop, setSelectedLevelCDesktop] = useState(
    getLevelByTier(3)
  )

  useEffect(() => {
    const membership = data?.memberships
      ? getMembership(data.memberships)
      : null
    if (membership) {
      const tier = membershipLevels[membership.membershipLevel]

      // The logic on which levels to display for upper levels is as requested by UI
      if (tier === 6) {
        setSelectedLevelAMobile(getLevelByTier(6))
        setSelectedLevelBMobile(getLevelByTier(7))

        setSelectedLevelADesktop(getLevelByTier(5))
        setSelectedLevelBDesktop(getLevelByTier(6))
        setSelectedLevelCDesktop(getLevelByTier(7))
      } else if (tier === 7) {
        setSelectedLevelAMobile(getLevelByTier(6))
        setSelectedLevelBMobile(getLevelByTier(7))

        setSelectedLevelADesktop(getLevelByTier(6))
        setSelectedLevelBDesktop(getLevelByTier(7))
        setSelectedLevelCDesktop(getLevelByTier(1))
      } else {
        setSelectedLevelAMobile(getLevelByTier(tier))
        setSelectedLevelBMobile(getLevelByTier(tier + 1))

        setSelectedLevelADesktop(getLevelByTier(tier))
        setSelectedLevelBDesktop(getLevelByTier(tier + 1))
        setSelectedLevelCDesktop(getLevelByTier(tier + 2))
      }
    }
  }, [isLoading, data?.memberships])

  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}
              value={selectedLevelAMobile.tier}
              onSelect={handleSelectChange(setSelectedLevelAMobile)}
            />
            <Image
              className={styles.icon}
              src={selectedLevelAMobile.icon}
              alt={selectedLevelAMobile.name}
              height={50}
              width={100}
            />

            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelAMobile.tier
                ) as ComparisonLevel
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              name="benefitB"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              value={selectedLevelBMobile.tier}
              onSelect={handleSelectChange(setSelectedLevelBMobile)}
            />
            <Image
              className={styles.icon}
              src={selectedLevelBMobile.icon}
              alt={selectedLevelBMobile.name}
              height={50}
              width={100}
            />

            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelBMobile.tier
                ) as ComparisonLevel
              }
            />
          </div>
        </div>
        <BenefitList levels={[selectedLevelAMobile, selectedLevelBMobile]} />
      </div>
      <div className={styles.columns}>
        <div className={styles.columnHeaderContainer}>
          <div className={styles.columnHeader}>
            <Select
              name="benefitA"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              value={selectedLevelADesktop.tier}
              onSelect={handleSelectChange(setSelectedLevelADesktop)}
            />
            <Image
              className={styles.icon}
              src={selectedLevelADesktop.icon}
              alt={selectedLevelADesktop.name}
              height={50}
              width={100}
            />

            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelADesktop.tier
                ) as ComparisonLevel
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              name="benefitB"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              value={selectedLevelBDesktop.tier}
              onSelect={handleSelectChange(setSelectedLevelBDesktop)}
            />
            <Image
              className={styles.icon}
              src={selectedLevelBDesktop.icon}
              alt={selectedLevelBDesktop.name}
              height={50}
              width={100}
            />

            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelBDesktop.tier
                ) as ComparisonLevel
              }
            />
          </div>
          <div className={styles.columnHeader}>
            <Select
              name="benefitC"
              label={intl.formatMessage({ id: "Level" })}
              items={levelOptions}
              value={selectedLevelCDesktop.tier}
              onSelect={handleSelectChange(setSelectedLevelCDesktop)}
            />
            <Image
              className={styles.icon}
              src={selectedLevelCDesktop.icon}
              alt={selectedLevelCDesktop.name}
              height={50}
              width={100}
            />

            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) => level.tier === selectedLevelCDesktop.tier
                ) as ComparisonLevel
              }
            />
          </div>
        </div>
        <BenefitList
          levels={[
            selectedLevelADesktop,
            selectedLevelBDesktop,
            selectedLevelCDesktop,
          ]}
        />
      </div>
      <div className={styles.largeTableContainer}>
        {/* Remove `as` once we have real data */}
        <LargeTable levels={levelsData.levels as ComparisonLevel[]} />
      </div>
    </div>
  )
}