import { Lang } from "@/constants/languages"
import { serverClient } from "@/lib/trpc/server"

import { auth } from "@/auth"
import SectionContainer from "@/components/Section/Container"
import Header from "@/components/Section/Header"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import OverviewTableTitle from "./OverviewTable/Title"
import HowItWorks from "./HowItWorks"
import LoyaltyLevels from "./LoyaltyLevels"
import OverviewTable from "./OverviewTable"

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

import type {
  DynamicComponentProps,
  DynamicContentProps,
} from "@/types/components/loyalty/blocks"
import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"

async function DynamicComponentBlock({ component }: DynamicComponentProps) {
  const session = await auth()

  const user = session ? await serverClient().user.get() : null

  switch (component) {
    case LoyaltyComponentEnum.how_it_works:
      return <HowItWorks />
    case LoyaltyComponentEnum.loyalty_levels:
      return <LoyaltyLevels />
    case LoyaltyComponentEnum.overview_table:
      return <OverviewTable user={user} />
    default:
      return null
  }
}

// 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 },
  ],
}

export default function DynamicContent({
  dynamicContent,
  firstItem,
}: DynamicContentProps) {
  const displayHeader = !!(
    dynamicContent.link ||
    dynamicContent.subtitle ||
    dynamicContent.title
  )

  const isOverviewTable =
    dynamicContent.component === LoyaltyComponentEnum.overview_table

  return (
    <SectionContainer className={styles.container}>
      {isOverviewTable ? (
        <div className={styles.header}>
          <OverviewTableTitle texts={titleTranslations[Lang.en]} />
          <Subtitle>{dynamicContent.subtitle}</Subtitle>
        </div>
      ) : displayHeader ? (
        <Header
          link={dynamicContent.link}
          subtitle={dynamicContent.subtitle}
          title={dynamicContent.title}
          topTitle={firstItem}
        />
      ) : null}
      <DynamicComponentBlock component={dynamicContent.component} />
    </SectionContainer>
  )
}
