"use client"

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

import { logout } from "@/constants/routes/handleAuth"

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 { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"

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

  if (!navigation) {
    return null
  }

  return (
    <nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
      <div className={styles.intro}>
        <Subtitle type="two" className={styles.userName}>
          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
        </Subtitle>
        <Caption className={styles.friendTypeWrapper}>
          <span className={styles.friendType}>Loyal friend</span>
          <span className={styles.friendPoints}>12 350 points</span>
        </Caption>
      </div>

      <ul className={styles.groups}>
        {navigation.menuItems.map((menuItem, idx) => (
          <li
            key={`${menuItem.display_sign_out_link}-${idx}`}
            className={styles.group}
          >
            <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 && lang ? (
                <li>
                  <Link
                    href={logout[lang]}
                    prefetch={false}
                    className={`${styles.link} ${styles.smallLink}`}
                  >
                    {intl.formatMessage({ id: "Log out" })}
                  </Link>
                </li>
              ) : null}
            </ul>
          </li>
        ))}
      </ul>
    </nav>
  )
}
