"use client"

import { useIntl } from "react-intl"

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

import SkeletonShimmer from "@/components/SkeletonShimmer"
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"

export default function MyPagesMobileDropdown() {
  const { data: myPagesNavigation } = useMyPagesNavigation()

  const intl = useIntl()
  const { toggleDropdown, isMyPagesMobileMenuOpen } = useDropdownStore()

  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 handleOnClick={handleOnClick} />
      </List>
      <List>
        <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({ handleOnClick }: { handleOnClick: () => void }) {
  const {
    data: myPagesNavigation,
    isLoading,
    isSuccess,
  } = useMyPagesNavigation()

  const primaryLinks = myPagesNavigation?.primaryLinks ?? []
  return (
    <>
      {isLoading && <Skeletons count={4} />}
      {isSuccess &&
        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({ handleOnClick }: { handleOnClick: () => void }) {
  const {
    data: myPagesNavigation,
    isLoading,
    isSuccess,
  } = useMyPagesNavigation()

  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
  const intl = useIntl()
  const lang = useLang()

  return (
    <>
      {isLoading && <Skeletons count={3} />}
      {isSuccess &&
        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>
    </>
  )
}

function Skeletons({ count }: { count: number }) {
  return (
    <>
      {Array.from({ length: count }).map((_, i) => (
        <li key={i} className={styles.skeletonItem}>
          <SkeletonShimmer width="100px" height="20px" />
        </li>
      ))}
    </>
  )
}

function useMyPagesNavigation() {
  const lang = useLang()
  return trpc.navigation.myPages.useQuery({ lang })
}