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

"use client"

import { useParams } from "next/navigation"
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 DA from "./data/DA.json"
import DE from "./data/DE.json"
import EN from "./data/EN.json"
import FI from "./data/FI.json"
import NO from "./data/NO.json"
import SV from "./data/SV.json"
import BenefitList from "./BenefitList"
import LargeTable from "./LargeTable"
import LevelSummary from "./LevelSummary"

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

import {
  ComparisonLevel,
  overviewTableActionsEnum,
  OverviewTableProps,
  OverviewTableReducerAction,
} from "@/types/components/loyalty/blocks"
import { User } from "@/types/user"

const levelsTranslations = {
  [Lang.en]: EN,
  [Lang.sv]: SV,
  [Lang.no]: NO,
  [Lang.da]: DA,
  [Lang.fi]: FI,
  [Lang.de]: DE,
}
function getTranslatedLevelByTier(tier: membershipLevels, lang: Lang) {
  return levelsTranslations[lang].levels.find(
    (level) => level.tier === tier
  ) as ComparisonLevel
}

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

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

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 lang = Lang.en
  const levelsData = levelsTranslations[lang]
  const [selectionState, dispatch] = useReducer(
    reducer,
    { user, lang },
    getInitialState
  )

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

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

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