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

import { logout } from "@/constants/routes/handleAuth"
import useDropdownStore from "@/stores/main-menu"

import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"

import styles from "./my-pages-mobile-dropdown.module.css"

import type { ReactNode } from "react"

import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { MyPagesLink } from "@/components/MyPages/menuItems"

export default function MyPagesMobileDropdown({
  primaryLinks,
  secondaryLinks,
}: {
  primaryLinks: MyPagesLink[]
  secondaryLinks: MyPagesLink[]
}) {
  const intl = useIntl()
  const { toggleDropdown, isMyPagesMobileMenuOpen } = useDropdownStore()

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

  const handleOnClick = () => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)

  return (
    <nav
      className={`${styles.navigationMenu} ${isMyPagesMobileMenuOpen ? styles.navigationMenuIsOpen : ""}`}
    >
      <Title textTransform="capitalize" level="h5">
        <div className={styles.heading}>
          {intl.formatMessage({ id: "My pages" })}
        </div>
      </Title>

      <List>
        <PrimaryLinks
          primaryLinks={primaryLinks}
          handleOnClick={handleOnClick}
        />
      </List>
      <List>
        <SecondaryLinks
          secondaryLinks={secondaryLinks}
          handleOnClick={handleOnClick}
        />
      </List>
    </nav>
  )
}

function List({ children }: { children: ReactNode }) {
  return (
    <>
      <div className={styles.dividerWrapper}>
        <Divider color="subtle" />
      </div>
      <ul className={styles.dropdownWrapper}>
        <ul className={styles.dropdownLinks}>{children}</ul>
      </ul>
    </>
  )
}

function PrimaryLinks({
  primaryLinks,
  handleOnClick,
}: {
  primaryLinks: MyPagesLink[]
  handleOnClick: () => void
}) {
  return (
    <>
      {primaryLinks.map((link, i) => (
        <li key={link.href + i}>
          <Link
            href={link.href}
            partialMatch
            size={"regular"}
            variant="myPageMobileDropdown"
            color="burgundy"
            onClick={handleOnClick}
          >
            {link.text}
          </Link>
        </li>
      ))}
    </>
  )
}
function SecondaryLinks({
  secondaryLinks,
  handleOnClick,
}: {
  secondaryLinks: MyPagesLink[]
  handleOnClick: () => void
}) {
  const intl = useIntl()
  const lang = useLang()

  return (
    <>
      {secondaryLinks.map((link, i) => (
        <li key={link.href + i}>
          <Link
            href={link.href}
            partialMatch
            size={"small"}
            variant="myPageMobileDropdown"
            color="burgundy"
            onClick={handleOnClick}
          >
            {link.text}
          </Link>
        </li>
      ))}
      <li>
        <Link
          href={logout[lang]}
          prefetch={false}
          size="small"
          color="burgundy"
          variant="myPageMobileDropdown"
        >
          {intl.formatMessage({ id: "Log out" })}
        </Link>
      </li>
    </>
  )
}