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 Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
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"
import type { LangParams } from "@/types/params"

export default async function CurrentBenefitsBlock({
  title,
  subtitle,
  link,
  lang,
}: AccountPageComponentProps & LangParams) {
  const user = await serverClient().user.get()
  const { formatMessage } = await getIntl()
  // 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) {
    return null
  }
  const membership = getMembership(user.memberships)
  if (!membership) {
    //  TODO: handle this case?
    return null
  }

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

  return (
    <SectionContainer>
      <SectionHeader title={title} link={link} subtitle={subtitle} />
      <Grids.Scrollable>
        {currentLevel.benefits.map((benefit, idx) => (
          <Link className={styles.card} href="#" key={`${currentLevel}-${idx}`}>
            <BiroScript
              className={styles.script}
              color="primaryLightOnSurfaceAccent"
              type="two"
            >
              {formatMessage({ id: "As our" })} {currentLevel.name}
            </BiroScript>
            <Title as="h5" level="h3" textAlign="center">
              {benefit.title}
            </Title>
          </Link>
        ))}
      </Grids.Scrollable>
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
  )
}