"use client"

import Link from "next/link"
import { useIntl } from "react-intl"

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

import { ArrowRightIcon } from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
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 { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"

export default function MyPagesMenuContent({
  membership,
  navigation,
  toggleOpenStateFn,
  user,
}: MyPagesMenuContentProps) {
  const intl = useIntl()
  const lang = useLang()
  const myPagesMenuContentRef = useTrapFocus()

  const membershipLevel = trpc.contentstack.loyaltyLevels.byLevel.useQuery(
    {
      level: MembershipLevelEnum[membership?.membershipLevel!],
    },
    { enabled: !!membership?.membershipLevel }
  ).data

  const membershipPoints = membership?.currentPoints
  const introClassName =
    membershipLevel && membershipPoints
      ? `${styles.intro}`
      : `${styles.intro} ${styles.noMembership}`
  if (!navigation) {
    return null
  }

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

      <ul className={styles.groups}>
        {navigation.menuItems.map((menuItem, idx) => (
          <li key={`${menuItem.display_sign_out_link}-${idx}`}>
            <Divider color="subtle" className={styles.divider} />
            <ul className={styles.menuItems}>
              {menuItem.links.map((link) => (
                <li key={link.uid}>
                  <Link
                    href={link.originalUrl || link.url}
                    onClick={toggleOpenStateFn}
                    className={`${styles.link} ${menuItem.display_sign_out_link ? styles.smallLink : ""}`}
                  >
                    {link.linkText}
                    <ArrowRightIcon className={styles.arrow} color="burgundy" />
                  </Link>
                </li>
              ))}
              {menuItem.display_sign_out_link ? (
                <li>
                  <Link
                    href={logout[lang]}
                    prefetch={false}
                    className={`${styles.link} ${styles.smallLink}`}
                  >
                    {intl.formatMessage({ id: "Log out" })}
                  </Link>
                </li>
              ) : null}
            </ul>
          </li>
        ))}
      </ul>
    </nav>
  )
}