import NextLink from "next/link"

import { myPages } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"

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

import Avatar from "./Avatar"
import MobileMenu from "./MobileMenu"
import MyPagesMenu from "./MyPagesMenu"
import MyPagesMobileMenu from "./MyPagesMobileMenu"
import NavigationMenu from "./NavigationMenu"

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

import type { MainMenuProps } from "@/types/components/header/mainMenu"

export default async function MainMenu({
  languageUrls,
  menuItems,
  topLink,
}: MainMenuProps) {
  const intl = await getIntl()
  const lang = getLang()
  const myPagesNavigation =
    await serverClient().contentstack.myPages.navigation.get()

  const user = await serverClient().user.name()
  const membership = await serverClient().user.membershipLevel()

  return (
    <div className={styles.mainMenu}>
      <nav className={styles.nav}>
        <NextLink className={styles.logoLink} href={`/${lang}`}>
          <Image
            alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
            className={styles.logo}
            data-js="scandiclogoimg"
            data-nosvgsrc="/_static/img/scandic-logotype.png"
            itemProp="logo"
            height={22}
            src="/_static/img/scandic-logotype.svg"
            width={103}
          />
        </NextLink>
        <div className={styles.menus}>
          <NavigationMenu items={menuItems} isMobile={false} />
          {user ? (
            <>
              <MyPagesMenu
                membership={membership}
                navigation={myPagesNavigation}
                user={user}
              />
              <MyPagesMobileMenu
                membership={membership}
                navigation={myPagesNavigation}
                user={user}
              />
            </>
          ) : (
            <Link
              href={myPages[lang]}
              className={styles.loginLink}
              aria-label={intl.formatMessage({ id: "Log in/Join" })}
            >
              <Avatar />
              <span className={styles.userName}>
                {intl.formatMessage({ id: "Log in/Join" })}
              </span>
            </Link>
          )}
          <MobileMenu
            languageUrls={languageUrls}
            menuItems={menuItems}
            topLink={topLink}
          />
        </div>
      </nav>
    </div>
  )
}