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 Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

export default async function SidebarMyPages() {
  const intl = await getIntl()

  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
        <Subtitle type="two" color="baseTextHighContrast">
          {intl.formatMessage({ id: "My pages" })}
        </Subtitle>

        <PrimaryLinks />
        <SecondaryLinks />
      </nav>
    </aside>
  )
}

async function PrimaryLinks() {
  const nav = await serverClient().navigation.myPages({})

  return (
    <>
      <Divider color="beige" />
      <ul className={styles.list}>
        {nav?.primaryLinks.map((link) => (
          <li key={link.href}>
            <Link
              color="burgundy"
              href={link.href}
              partialMatch
              prefetch={true}
              size={"regular"}
              variant="sidebar"
            >
              {link.text}
            </Link>
          </li>
        ))}
      </ul>
    </>
  )
}

async function SecondaryLinks() {
  const lang = getLang()

  const nav = await serverClient().navigation.myPages({})
  const intl = await getIntl()

  return (
    <>
      <Divider color="beige" />
      <ul className={styles.list}>
        {nav?.secondaryLinks.map((link) => (
          <li key={link.href}>
            <Link
              color="burgundy"
              href={link.href}
              partialMatch
              prefetch={true}
              size={"small"}
              variant="sidebar"
            >
              {link.text}
            </Link>
          </li>
        ))}
        <li>
          <Link
            color="burgundy"
            href={logout[lang]}
            partialMatch
            prefetch={false}
            size={"small"}
            variant="sidebar"
          >
            {intl.formatMessage({ id: "Log out" })}
          </Link>
        </li>
      </ul>
    </>
  )
}