"use client"
import { useIntl } from "react-intl"

import { logout } from "@/constants/routes/handleAuth"
import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
import useDropdownStore from "@/stores/main-menu"

import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

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

type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>

export default function MyPagesMenu({
  navigation,
}: {
  navigation: Navigation
}) {
  const { formatMessage } = useIntl()
  const lang = useLang()
  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
    useDropdownStore()

  if (!navigation) {
    return null
  }

  return (
    <nav
      className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
    >
      <div className={styles.friendTypeWrapper}>
        <span className={styles.friendType}>Loyal friend</span>
        <span className={styles.friendPoints}>12 350 points</span>
      </div>
      <ul className={styles.groups}>
        {navigation.menuItems.map((menuItem, idx) => (
          <li
            key={`${menuItem.display_sign_out_link}-${idx}`}
            id={`${menuItem.display_sign_out_link}-${idx}`}
            className={styles.group}
          >
            <ul className={styles.menuItems}>
              {menuItem.links.map((link) => (
                <li key={link.uid}>
                  <Link
                    href={link.originalUrl || link.url}
                    partialMatch
                    size={menuItem.display_sign_out_link ? "small" : "regular"}
                    variant="myPageMobileDropdown"
                    color="burgundy"
                    onClick={toggleMyPagesMobileMenu}
                    className={styles.link}
                  >
                    {link.linkText}
                    <ArrowRightIcon className={styles.arrow} color="burgundy" />
                  </Link>
                </li>
              ))}
              {menuItem.display_sign_out_link && lang ? (
                <li>
                  <Link
                    href={logout[lang]}
                    prefetch={false}
                    size="small"
                    color="burgundy"
                    variant="myPageMobileDropdown"
                  >
                    {formatMessage({ id: "Log out" })}
                  </Link>
                </li>
              ) : null}
            </ul>
          </li>
        ))}
      </ul>
    </nav>
  )
}