import { MembershipLevelEnum } from "@/constants/membershipLevels"
import { serverClient } from "@/lib/trpc/server"

import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Grids from "@/components/TempDesignSystem/Grids"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getLang } from "@/i18n/serverContext"
import { getMembershipLevelObject } from "@/utils/membershipLevel"
import { getMembership } from "@/utils/user"

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

import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

export default async function CurrentBenefitsBlock({
  title,
  subtitle,
  link,
}: AccountPageComponentProps) {
  const user = await serverClient().user.get()
  // TAKE NOTE: we need clarification on how benefits stack from different levels
  // in order to determine if a benefit is specific to a level or if it is a cumulative benefit
  // we might have to add a new boolean property "exclusive" or similar
  if (!user || "error" in user) {
    return null
  }
  const membership = getMembership(user.memberships)
  if (!membership) {
    //  TODO: handle this case?
    return null
  }

  const currentLevel = getMembershipLevelObject(
    user.memberships[0].membershipLevel as MembershipLevelEnum,
    getLang()
  )
  if (!currentLevel) {
    //  TODO: handle this case?
    return null
  }

  return (
    <SectionContainer>
      <SectionHeader title={title} link={link} subtitle={subtitle} />
      <Grids.Stackable>
        {currentLevel.benefits.map((benefit, idx) => (
          <article className={styles.card} key={`${currentLevel}-${idx}`}>
            <Title
              as="h5"
              level="h3"
              textAlign="center"
              textTransform="uppercase"
            >
              {benefit.title}
            </Title>
          </article>
        ))}
      </Grids.Stackable>
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
  )
}