import { logout } from "@/constants/routes/handleAuth"
import { overview } from "@/constants/routes/myPages"
import { getName } from "@/lib/trpc/memoizedRequests"

import LoginButton from "@/components/LoginButton"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

import type { TopMenuProps } from "@/types/components/current/header/topMenu"

function capitalize(str: string) {
  return str.charAt(0).toUpperCase().toUpperCase() + str.slice(1).toLowerCase()
}

export default async function TopMenu({
  frontpageLinkText,
  homeHref,
  links,
  languageSwitcher,
}: TopMenuProps) {
  const intl = await getIntl()
  const user = await getName()
  return (
    <div className={styles.topMenu}>
      <div className={styles.container}>
        <a className={styles.homeLink} href={homeHref}>
          {frontpageLinkText}
        </a>

        <ul className={styles.list}>
          {languageSwitcher ? (
            <li className={styles.langSwitcher}>{languageSwitcher}</li>
          ) : null}

          {links.map(({ link }, i) => (
            <li key={link.href + i}>
              <a className={styles.link} href={link.href}>
                {link.title}
              </a>
            </li>
          ))}
          <li className={styles.sessionContainer}>
            {user ? (
              <>
                {user ? (
                  <Link
                    href={overview[getLang()]}
                    className={styles.sessionLink}
                    prefetch={false}
                  >
                    {capitalize(user.firstName)}
                  </Link>
                ) : null}
                <div className={styles.loginSeparator} />
                <Link
                  href={logout[getLang()]}
                  className={styles.sessionLink}
                  prefetch={false}
                >
                  {intl.formatMessage({ id: "Log out" })}
                </Link>
              </>
            ) : (
              <LoginButton
                position="hamburger menu"
                trackingId="loginStartTopMenu"
                className={`${styles.sessionLink} ${styles.loginLink}`}
                variant="default"
                size="small"
              >
                {intl.formatMessage({ id: "Log in" })}
              </LoginButton>
            )}
          </li>
        </ul>
      </div>
    </div>
  )
}

export async function TopMenuSkeleton() {
  const intl = await getIntl()
  const links = new Array(5).fill("")
  return (
    <div className={styles.topMenu}>
      <div className={styles.container}>
        <ul className={styles.list}>
          {links.map((link, i) => (
            <li key={i} className={styles.skeletonWrapper}>
              <SkeletonShimmer width="100px" height="16px" />
            </li>
          ))}
          <li className={styles.sessionContainer}>
            <LoginButton
              position="hamburger menu"
              trackingId="loginStartTopMenu"
              className={`${styles.sessionLink} ${styles.loginLink}`}
              variant="default"
              size="small"
            >
              {intl.formatMessage({ id: "Log in" })}
            </LoginButton>
          </li>
        </ul>
      </div>
    </div>
  )
}