import {
  findMyBooking,
  findMyBookingCurrentWebPath,
} from "@scandic-hotels/common/constants/routes/findMyBooking"
import { getCurrentWebUrl } from "@scandic-hotels/common/utils/url"

import { env } from "@/env/server"
import { getHeader } from "@/lib/trpc/memoizedRequests"

import { IconName } from "@/components/Icons/iconName"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isLoggedInUser } from "@/utils/isLoggedInUser"

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

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

export default async function TopMenu() {
  // cached
  const intl = await getIntl()
  // both preloaded
  const header = await getHeader()
  const isLoggedIn = await isLoggedInUser()

  if (!header) {
    return null
  }

  const lang = await getLang()
  const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
  const findMyBookingUrl = !env.isLangLive(lang)
    ? getCurrentWebUrl({
        path: findMyBookingCurrentWebPath[lang],
        lang,
        baseUrl,
      })
    : findMyBooking[lang]

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

          <HeaderLink href={findMyBookingUrl} iconName={IconName.Search}>
            {intl.formatMessage({
              defaultMessage: "Find booking",
            })}
          </HeaderLink>
        </div>
      </div>
    </div>
  )
}

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