web/components/Blocks/DynamicContent/OverviewTable/Client.tsx

"use client"

import { useReducer } from "react"
import { useIntl } from "react-intl"

import {
  type MembershipLevel,
  MembershipLevelEnum,
} from "@/constants/membershipLevels"

import MembershipLevelIcon from "@/components/Levels/Icon"
import Select from "@/components/TempDesignSystem/Select"

import LargeTable from "./LargeTable"
import LevelSummary from "./LevelSummary"
import { getInitialState, getLevel, reducer } from "./reducer"
import RewardList from "./RewardList"
import YourLevel from "./YourLevelScript"

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

import type { Key } from "react-aria-components"

import {
  type ComparisonLevel,
  type DesktopSelectColumns,
  type MobileColumnHeaderProps,
  OverviewTableActionsEnum,
  type OverviewTableClientProps,
} from "@/types/components/overviewTable"

function getLevelNamesForSelect(level: MembershipLevel, levelName: string) {
  const levelToNumber = MembershipLevelEnum[level]
  return [levelToNumber, levelName].join(" - ")
}

export default function OverviewTableClient({
  activeMembership,
  levels,
}: OverviewTableClientProps) {
  const intl = useIntl()

  const [selectionState, dispatch] = useReducer(
    reducer,
    { activeMembership, levels },
    getInitialState
  )

  function handleSelectChange(actionType: OverviewTableActionsEnum) {
    return (key: Key) => {
      dispatch({
        payload: getLevel(key as MembershipLevel, levels),
        type: actionType,
      })
    }
  }

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

  const activeMembershipLevel = activeMembership ?? null

  function MobileColumnHeader({ column }: MobileColumnHeaderProps) {
    let selectedLevelMobile: ComparisonLevel
    let actionEnumMobile: OverviewTableActionsEnum
    switch (column) {
      case "A":
        selectedLevelMobile = selectionState.selectedLevelAMobile
        actionEnumMobile = OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE
        break
      case "B":
        selectedLevelMobile = selectionState.selectedLevelBMobile
        actionEnumMobile = OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE
        break
      default:
        return null
    }
    return (
      <div className={styles.columnHeader}>
        <div className={styles.icon}>
          {activeMembershipLevel === selectedLevelMobile.level_id ? (
            <YourLevel />
          ) : null}
          <MembershipLevelIcon
            level={selectedLevelMobile.level_id}
            color="red"
            height="50"
            width="100"
          />
        </div>
        <LevelSummary
          level={
            levels.find(
              (level) => level.level_id === selectedLevelMobile.level_id
            )!
          }
          showDescription={false}
        />
        <Select
          aria-label={intl.formatMessage({ id: "Level" })}
          name={`reward` + column}
          label={intl.formatMessage({ id: "Level" })}
          items={levelOptions}
          value={selectedLevelMobile.level_id}
          onSelect={handleSelectChange(actionEnumMobile)}
        />
      </div>
    )
  }

  function SelectDesktop({ column }: DesktopSelectColumns) {
    let selectedLevelDesktop: ComparisonLevel
    let actionEnumDesktop: OverviewTableActionsEnum
    switch (column) {
      case "A":
        selectedLevelDesktop = selectionState.selectedLevelADesktop
        actionEnumDesktop =
          OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP
        break
      case "B":
        selectedLevelDesktop = selectionState.selectedLevelBDesktop
        actionEnumDesktop =
          OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP
        break
      case "C":
        selectedLevelDesktop = selectionState.selectedLevelCDesktop
        actionEnumDesktop =
          OverviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP
        break
      default:
        return null
    }
    return (
      <Select
        aria-label={intl.formatMessage({ id: "Level" })}
        name={`reward` + column}
        label={intl.formatMessage({ id: "Level" })}
        items={levelOptions}
        value={selectedLevelDesktop.level_id}
        onSelect={handleSelectChange(actionEnumDesktop)}
      />
    )
  }
  return (
    <div>
      <div className={styles.mobileColumns}>
        <div className={styles.columnHeaderContainer}>
          <MobileColumnHeader column={"A"} />
          <MobileColumnHeader column={"B"} />
        </div>
        <RewardList
          levels={[
            selectionState.selectedLevelAMobile,
            selectionState.selectedLevelBMobile,
          ]}
        />
      </div>
      <div className={styles.columns}>
        <LargeTable
          levels={[
            selectionState.selectedLevelADesktop,
            selectionState.selectedLevelBDesktop,
            selectionState.selectedLevelCDesktop,
          ]}
          activeLevel={activeMembershipLevel}
          Select={SelectDesktop}
        />
      </div>
      <div className={styles.largeTableContainer}>
        <LargeTable levels={levels} activeLevel={activeMembershipLevel} />
      </div>
    </div>
  )
}