import {
  getHeader,
  getLanguageSwitcher,
  getName,
} from "@/lib/trpc/memoizedRequests"

import LanguageSwitcher from "@/components/LanguageSwitcher"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n"

import HeaderLink from "../HeaderLink"
import TopLink from "../TopLink"

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

import { IconName } from "@/types/components/icon"

export default async function TopMenu() {
  // cached
  const intl = await getIntl()
  // both preloaded
  const languages = await getLanguageSwitcher()
  const header = await getHeader()
  const user = await getName()

  if (!languages || !header) {
    return null
  }

  return (
    <div className={styles.topMenu}>
      <div className={styles.content}>
        <TopLink isLoggedIn={!!user} topLink={header.data.topLink} />
        <div className={styles.options}>
          <LanguageSwitcher type="desktopHeader" urls={languages.urls} />

          <Caption type="regular" color="textMediumContrast" asChild>
            <HeaderLink href="#" iconName={IconName.Search}>
              {intl.formatMessage({ id: "Find booking" })}
            </HeaderLink>
          </Caption>
        </div>
      </div>
    </div>
  )
}

export function TopMenuSkeleton() {
  return (
    <div className={styles.topMenu}>
      <div className={styles.content}>
        <div className={styles.options}>
          <SkeletonShimmer width="25ch" height="1.2em" />
        </div>
      </div>
    </div>
  )
}