import type { JSX } from "react"

import type { MembershipLevel } from "@/constants/membershipLevels"
import type { LoyaltyLevel } from "@/server/routers/contentstack/loyaltyLevel/output"
import type { CMSReward } from "../trpc/routers/contentstack/reward"

export type OverviewTableClientProps = {
  activeMembership: MembershipLevel | null
  levels: ComparisonLevel[]
}

export type LevelCardProps = {
  level: LevelWithRewards
}

export type LevelWithRewards = LoyaltyLevel & { rewards: CMSReward[] }

export type ComparisonLevel = LevelWithRewards

export type LevelSummaryProps = {
  level: ComparisonLevel
  showDescription?: boolean
}

export type RewardCardProps = {
  comparedValues: (CMSReward | undefined)[]
  title: string
  description: string
}

export type RewardValueProps = {
  reward?: CMSReward
}

export type RewardListProps = {
  levels: ComparisonLevel[]
}

export type MobileColumnHeaderProps = {
  column: "A" | "B"
}

export type DesktopSelectColumns = {
  column: MobileColumnHeaderProps["column"] | "C"
}

export type LargeTableProps = {
  levels: ComparisonLevel[]
  activeLevel: MembershipLevel | null
  Select?: (column: DesktopSelectColumns) => JSX.Element | null
}

export type RewardTableHeaderProps = {
  name: string
  description: string
}

export enum OverviewTableActionsEnum {
  SET_SELECTED_LEVEL_A_MOBILE = "SET_SELECTED_LEVEL_A_MOBILE",
  SET_SELECTED_LEVEL_B_MOBILE = "SET_SELECTED_LEVEL_B_MOBILE",
  SET_SELECTED_LEVEL_A_DESKTOP = "SET_SELECTED_LEVEL_A_DESKTOP",
  SET_SELECTED_LEVEL_B_DESKTOP = "SET_SELECTED_LEVEL_B_DESKTOP",
  SET_SELECTED_LEVEL_C_DESKTOP = "SET_SELECTED_LEVEL_C_DESKTOP",
}

export type OverviewTableReducerAction = {
  type: OverviewTableActionsEnum
  payload: ComparisonLevel
}
