web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

"use client"

import { useIntl } from "react-intl"

import { logout } from "@/constants/routes/handleAuth"
import { trpc } from "@/lib/trpc/client"

import { ArrowRightIcon } from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { useTrapFocus } from "@/hooks/useTrapFocus"

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

import type { MyPagesMenuProps } from "../MyPagesMenu"

type Props = MyPagesMenuProps & { toggleOpenStateFn: () => void }

export default function MyPagesMenuContent({
  membership,
  toggleOpenStateFn,
  user,
  membershipLevel,
}: Props) {
  const intl = useIntl()
  const myPagesMenuContentRef = useTrapFocus()
  const { data: myPagesNavigation } = useMyPagesNavigation()

  const primaryLinks = myPagesNavigation?.primaryLinks ?? []
  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []

  const membershipPoints = membership?.currentPoints
  const introClassName =
    membershipLevel && membershipPoints
      ? `${styles.intro}`
      : `${styles.intro} ${styles.noMembership}`

  if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
    return null
  }

  return (
    <nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
      <div className={introClassName}>
        <Subtitle type="two" className={styles.userName}>
          {intl.formatMessage(
            { id: "Hi {firstName}!" },
            { firstName: user.firstName }
          )}
        </Subtitle>
        {membershipLevel && membershipPoints ? (
          <Caption className={styles.friendTypeWrapper}>
            <span className={styles.friendType}>{membershipLevel.name}</span>
            <span>
              {intl.formatMessage(
                { id: "{pointsAmount, number} points" },
                { pointsAmount: membershipPoints }
              )}
            </span>
          </Caption>
        ) : null}
      </div>

      <ul className={styles.groups}>
        <li>
          <Divider color="subtle" className={styles.divider} />

          <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />

          <Divider color="subtle" className={styles.divider} />
          <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
        </li>
      </ul>
    </nav>
  )
}

function PrimaryLinks({
  toggleOpenStateFn,
}: {
  toggleOpenStateFn: () => void
}) {
  const { data: myPagesNavigation } = useMyPagesNavigation()

  const primaryLinks = myPagesNavigation?.primaryLinks ?? []

  return (
    <ul className={styles.menuItems}>
      {primaryLinks.map((link, i) => (
        <li key={link.href + i}>
          <Link
            href={link.href}
            onClick={toggleOpenStateFn}
            variant="menu"
            weight={"bold"}
            className={styles.link}
          >
            {link.text}
            <ArrowRightIcon className={styles.arrow} color="burgundy" />
          </Link>
        </li>
      ))}
    </ul>
  )
}

function SecondaryLinks({
  toggleOpenStateFn,
}: {
  toggleOpenStateFn: () => void
}) {
  const intl = useIntl()
  const lang = useLang()
  const { data: myPagesNavigation } = useMyPagesNavigation()

  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []

  return (
    <ul className={styles.menuItems}>
      {secondaryLinks.map((link, i) => (
        <li key={link.href + i}>
          <Link
            href={link.href}
            onClick={toggleOpenStateFn}
            variant="menu"
            className={styles.link}
          >
            {link.text}
            <ArrowRightIcon className={styles.arrow} color="burgundy" />
          </Link>
        </li>
      ))}
      <li>
        <Link
          href={logout[lang]}
          prefetch={false}
          variant="menu"
          className={styles.link}
        >
          {intl.formatMessage({ id: "Log out" })}
        </Link>
      </li>
    </ul>
  )
}

const useMyPagesNavigation = () => {
  const lang = useLang()
  return trpc.navigation.myPages.useQuery({
    lang: lang,
  })
}