import { Fragment } from "react"

import { Lang } from "@/constants/languages"
import { logout } from "@/constants/routes/handleAuth"
import { serverClient } from "@/lib/trpc/server"

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

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

export default async function MyPagesMobileDropdown({
  lang,
}: {
  lang: Lang | null
}) {
  const navigation = await serverClient().contentstack.myPages.navigation.get()
  if (!navigation) {
    return null
  }

  return (
    <nav
      className={`${styles.navigationMenu} ${/*isMyPagesMenuOpen*/ true ? styles.navigationMenuIsOpen : ""}`}
    >
      <Title className={styles.heading} textTransform="capitalize" level="h5">
        {navigation.title}
      </Title>
      {navigation.menuItems.map((menuItem, idx) => (
        <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
          {/*TODO: add pale color? */}
          <Divider color="peach" />
          <ul className={styles.dropdownWrapper}>
            <ul className={styles.dropdownLinks}>
              {menuItem.links.map((link) => (
                <li key={link.uid}>
                  <Link
                    href={link.originalUrl || link.url}
                    partialMatch
                    size={menuItem.display_sign_out_link ? "small" : "regular"}
                    variant="myPage"
                    color="burgundy"
                  >
                    {/*TODO: add myPageMobileMenu variant */}
                    {link.linkText}
                  </Link>
                </li>
              ))}
              {/* {menuItem.display_sign_out_link ? ( */}
              {/*   <li> */}
              {/*     <Link */}
              {/*       color="burgundy" */}
              {/*       href={logout[lang]} */}
              {/*       prefetch={false} */}
              {/*       size="small" */}
              {/*       variant="sidebar" */}
              {/*     > */}
              {/*       {formatMessage({ id: "Log out" })} */}
              {/*     </Link> */}
              {/*   </li> */}
              {/* ) : null} */}
            </ul>
          </ul>
        </Fragment>
      ))}
    </nav>
  )
}