import NextLink from "next/link"
import { Suspense } from "react"

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

import { NavigationMenuListSkeleton } from "./NavigationMenu/NavigationMenuList"
import { MobileMenuSkeleton } from "./MobileMenu"
import MobileMenuWrapper from "./MobileMenuWrapper"
import MyPagesMenuWrapper, {
  MyPagesMenuWrapperSkeleton,
} from "./MyPagesMenuWrapper"
import NavigationMenu from "./NavigationMenu"

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

export default function MainMenu() {
  return (
    <div className={styles.mainMenu}>
      <nav className={styles.nav}>
        <Suspense fallback={<Logo alt="..." />}>
          <MainMenuLogo />
        </Suspense>
        <div className={styles.menus}>
          <Suspense fallback={<NavigationMenuListSkeleton />}>
            <NavigationMenu isMobile={false} />
          </Suspense>
          <Suspense fallback={<MyPagesMenuWrapperSkeleton />}>
            <MyPagesMenuWrapper />
          </Suspense>
          <Suspense fallback={<MobileMenuSkeleton />}>
            <MobileMenuWrapper>
              <NavigationMenu isMobile={true} />
            </MobileMenuWrapper>
          </Suspense>
        </div>
      </nav>
    </div>
  )
}

async function MainMenuLogo() {
  const intl = await getIntl()

  return <Logo alt={intl.formatMessage({ id: "Back to scandichotels.com" })} />
}

function Logo({ alt }: { alt: string }) {
  const lang = getLang()

  return (
    <NextLink className={styles.logoLink} href={`/${lang}`}>
      <Image
        alt={alt}
        className={styles.logo}
        height={22}
        src="/_static/img/scandic-logotype.svg"
        priority
        width={103}
      />
    </NextLink>
  )
}