web/components/Current/Header/MainMenu/index.tsx

"use client"
import { usePathname } from "next/navigation"
import { useIntl } from "react-intl"

import { logout } from "@/constants/routes/handleAuth"
import { myPages } from "@/constants/routes/myPages"
import useDropdownStore from "@/stores/main-menu"

import Image from "@/components/Image"
import LoginButton from "@/components/LoginButton"
import Avatar from "@/components/MyPages/Avatar"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import { trackClick } from "@/utils/tracking"

import BookingButton from "../BookingButton"

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

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

export function MainMenu({
  frontpageLinkText,
  homeHref,
  links,
  logo,
  topMenuMobileLinks,
  languageSwitcher,
  myPagesMobileDropdown,
  bookingHref,
  user,
}: MainMenuProps) {
  const intl = useIntl()
  const lang = useLang()
  const pathname = usePathname()

  const isThreeStaticPagesPathnames = [
    "/de/sponsoring",
    "/en/sponsoring",
    "/da/sponsorering",
    "/fi/sponsorointi",
    "/no/vi-sponser",
    "/sv/vi-sponsrar",
    "/de/scandic-entdecken/wlan",
    "/en/explore-scandic/wifi",
    "/da/oplev-scandic/wifi",
    "/fi/koe-scandic/maksuton-internetyhteys",
    "/no/utforsk-scandic/wifi",
    "/sv/utforska-scandic/wi-fi",
    "/de/kundenbetreuung/haufig-gestellte-fragen/nutzung-der-internetseite",
    "/en/customer-service/frequently-asked-questions/using-the-website",
    "/da/kundeservice/sporgsmal-og-svar/om-scandics-website",
    "/fi/asiakaspalvelu/usein-kysytyt-kysymykset/tietoja-internetsivuista",
    "/no/kundeservice/sporsmal-og-svar/bruk-av-nettsiden",
    "/sv/kundservice/fragor-och-svar/om-scandics-webbplats",
    "/de/current-content-page",
    "/en/current-content-page",
    "/da/current-content-page",
    "/fi/current-content-page",
    "/no/current-content-page",
    "/sv/current-content-page",
  ].includes(pathname)

  const { toggleDropdown, isMyPagesMobileMenuOpen, isHamburgerMenuOpen } =
    useDropdownStore()

  function handleMyPagesMobileMenuClick() {
    // Only track click when opening it
    if (!isMyPagesMobileMenuOpen) {
      trackClick("profile picture icon")
    }

    toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
  }

  return (
    <div className={styles.mainMenu}>
      <div
        className={styles.container}
        itemScope
        itemType="http://schema.org/Organization"
      >
        <meta itemProp="name" content="Scandic" />
        <nav className={styles.navBar}>
          <button
            aria-pressed="false"
            className={`${styles.expanderBtn} ${isHamburgerMenuOpen ? styles.expanded : ""}`}
            onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
            type="button"
          >
            <span className={styles.iconBars}></span>
            <span className={styles.hiddenAccessible}>Menu</span>
          </button>

          <a className={styles.logoLink} href={homeHref}>
            <span className={styles.hiddenAccessible}>{frontpageLinkText}</span>
            <Image
              alt="Scandic Hotels logo"
              className={styles.logo}
              data-js="scandiclogoimg"
              data-nosvgsrc="/_static/img/scandic-logotype.png"
              itemProp="logo"
              height={22}
              src={logo.url}
              width={logo.dimension.width}
            />
          </a>

          <ul
            className={`${styles.listWrapper} ${isHamburgerMenuOpen ? styles.isOpen : ""}`}
          >
            <ul className={styles.linkRow}>
              {user ? (
                <li className={styles.mobileLinkRow}>
                  <Link
                    className={styles.mobileLinkButton}
                    href={myPages[lang]}
                  >
                    {intl.formatMessage({ id: "My pages" })}
                  </Link>
                </li>
              ) : (
                <>
                  <li>
                    <Image
                      src="/_static/img/icon-scandic-friends.svg"
                      alt="Scanidc Friends Logo"
                      height={35}
                      width={35}
                      className={styles.scandicFriendsLogo}
                    />
                  </li>
                  <li className={styles.mobileLinkRow}>
                    <LoginButton
                      position="hamburger menu"
                      trackingId="loginStartHamburgerMenu"
                      className={styles.mobileLinkButton}
                    >
                      {intl.formatMessage({ id: "Log in" })}
                    </LoginButton>
                  </li>
                </>
              )}

              <li className={styles.mobileLinkRow}>
                <span className={styles.mobileSeparator} />
              </li>
              <li className={styles.mobileLinkRow}>
                <a className={styles.mobileLinkButton} href="">
                  {intl.formatMessage({ id: "Find booking" })}
                </a>
              </li>
            </ul>
            <ul className={styles.mainLinks}>
              {links.map((link, i) => (
                <li className={styles.li} key={link.href + i}>
                  <Link
                    className={styles.link}
                    href={link.href}
                    trackingId={
                      isHamburgerMenuOpen
                        ? `hamburger - ${link.title}`
                        : undefined
                    }
                  >
                    {link.title}
                  </Link>
                </li>
              ))}
            </ul>

            <ul className={styles.mobileList}>
              {topMenuMobileLinks.map(({ link }, i) => (
                <li className={styles.mobileLi} key={link.href + i}>
                  <Link
                    className={styles.mobileLink}
                    href={link.href}
                    trackingId={
                      isHamburgerMenuOpen
                        ? `hamburger - ${link.title}`
                        : undefined
                    }
                  >
                    {link.title}
                  </Link>
                </li>
              ))}
            </ul>
            {languageSwitcher ? (
              <li className={styles.mobileLi}>{languageSwitcher}</li>
            ) : null}
            {!!user ? (
              <li className={`${styles.mobileLi} ${styles.logout}`}>
                <Link
                  href={logout[lang]}
                  className={styles.mobileLink}
                  prefetch={false}
                >
                  {intl.formatMessage({ id: "Log out" })}
                </Link>
              </li>
            ) : null}
          </ul>
          <div className={styles.buttonContainer}>
            <div className={styles.myPagesDesktopLink}>
              {!isThreeStaticPagesPathnames && user ? (
                <Link className={styles.link} href={myPages[lang]}>
                  {intl.formatMessage({ id: "My pages" })}
                </Link>
              ) : null}
            </div>
            <BookingButton href={bookingHref} />
            {!isThreeStaticPagesPathnames && myPagesMobileDropdown && user ? (
              <div
                role="button"
                onClick={handleMyPagesMobileMenuClick}
                className={styles.avatarButton}
              >
                <Avatar firstName={user.firstName} lastName={user.lastName} />
              </div>
            ) : null}
          </div>
          {isMyPagesMobileMenuOpen ? myPagesMobileDropdown : null}
        </nav>
      </div>
    </div>
  )
}

export function MainMenuSkeleton() {
  const intl = useIntl()

  const links = new Array(5).fill("")
  return (
    <div className={styles.mainMenu}>
      <div
        className={styles.container}
        itemScope
        itemType="http://schema.org/Organization"
      >
        <meta itemProp="name" content="Scandic" />
        <nav className={styles.navBar}>
          <button
            aria-pressed="false"
            className={styles.expanderBtn}
            type="button"
          >
            <span className={styles.iconBars}></span>
            <span className={styles.hiddenAccessible}>Menu</span>
          </button>

          <a className={styles.logoLink} href={""}>
            <Image
              alt="Scandic Hotels logo"
              className={styles.logo}
              data-js="scandiclogoimg"
              itemProp="logo"
              height={20}
              src={"/_static/img/scandic-logotype.png"}
              width={200}
            />
          </a>

          <ul className={styles.listWrapper}>
            {links.map((link, i) => (
              <li className={`${styles.li} ${styles.skeletonWrapper}`} key={i}>
                <SkeletonShimmer height="22px" width="130px" />
              </li>
            ))}
          </ul>
          <div className={styles.buttonContainer}>
            <BookingButton href={""} />
          </div>
        </nav>
      </div>
    </div>
  )
}