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

"use client"

import { useReducer } 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 Image from "@/components/Image"
import Select from "@/components/TempDesignSystem/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,
  overviewTableActionsEnum,
  OverviewTableProps,
  OverviewTableReducerAction,
} from "@/types/components/loyalty/blocks"
import { User } from "@/types/user"

// 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: membershipLevels) {
  return levelsData.levels.find(
    (level) => level.tier === tier
  ) as ComparisonLevel
}

function getInitialState(user?: User) {
  const membership = user?.memberships ? getMembership(user.memberships) : null
  if (!membership?.membershipLevel) {
    return {
      selectedLevelAMobile: getLevelByTier(1),
      selectedLevelBMobile: getLevelByTier(2),
      selectedLevelADesktop: getLevelByTier(1),
      selectedLevelBDesktop: getLevelByTier(2),
      selectedLevelCDesktop: getLevelByTier(3),
    }
  }
  if (!membership.membershipLevel) return null
  const tier = membershipLevels[membership.membershipLevel]

  switch (tier) {
    case 6:
      return {
        selectedLevelAMobile: getLevelByTier(6),
        selectedLevelBMobile: getLevelByTier(7),
        selectedLevelADesktop: getLevelByTier(5),
        selectedLevelBDesktop: getLevelByTier(6),
        selectedLevelCDesktop: getLevelByTier(7),
      }
    case 7:
      return {
        selectedLevelAMobile: getLevelByTier(6),
        selectedLevelBMobile: getLevelByTier(7),
        selectedLevelADesktop: getLevelByTier(6),
        selectedLevelBDesktop: getLevelByTier(7),
        selectedLevelCDesktop: getLevelByTier(1),
      }
    default:
      return {
        selectedLevelAMobile: getLevelByTier(tier),
        selectedLevelBMobile: getLevelByTier(tier + 1),
        selectedLevelADesktop: getLevelByTier(tier),
        selectedLevelBDesktop: getLevelByTier(tier + 1),
        selectedLevelCDesktop: getLevelByTier(tier + 2),
      }
  }
}

function reducer(state: any, action: OverviewTableReducerAction) {
  switch (action.type) {
    case overviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE:
      return {
        ...state,
        selectedLevelAMobile: action.payload,
      }
    case overviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE:
      return {
        ...state,
        selectedLevelBMobile: action.payload,
      }
    case overviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP:
      return {
        ...state,
        selectedLevelADesktop: action.payload,
      }
    case overviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP:
      return {
        ...state,
        selectedLevelBDesktop: action.payload,
      }
    case overviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP:
      return {
        ...state,
        selectedLevelCDesktop: action.payload,
      }
    default:
      return state
  }
}

export default function OverviewTable({ user }: OverviewTableProps) {
  const intl = useIntl()

  const [selectionState, dispatch] = useReducer(reducer, user, getInitialState)

  function handleSelectChange(actionType: overviewTableActionsEnum) {
    return (key: Key) => {
      if (typeof key === "number") {
        dispatch({
          payload: getLevelByTier(key),
          type: actionType,
        })
      }
    }
  }

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

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

            <LevelSummary
              level={
                levelsData.levels.find(
                  (level) =>
                    level.tier === selectionState.selectedLevelBMobile.tier
                ) as ComparisonLevel
              }
            />
          </div>
        </div>
        <BenefitList
          levels={[
            selectionState.selectedLevelAMobile,
            selectionState.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={selectionState.selectedLevelADesktop.tier}
              onSelect={handleSelectChange(
                overviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP
              )}
            />
            <Image
              className={styles.icon}
              src={selectionState.selectedLevelADesktop.icon}
              alt={selectionState.selectedLevelADesktop.name}
              height={50}
              width={100}
            />

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

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

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