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

"use client"
import { useState } from "react"
import { useIntl } from "react-intl"

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

import Image from "@/components/Image"
import Avatar from "@/components/MyPages/Avatar"
import Link from "@/components/TempDesignSystem/Link"

import BookingButton from "../BookingButton"

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

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

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

  const {
    isHamburgerMenuOpen,
    isMyPagesMobileMenuOpen,
    toggleHamburgerMenu,
    toggleMyPagesMobileMenu,
  } = useDropdownStore()

  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={toggleHamburgerMenu}
            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.avatarWrapper}>
                    <Avatar
                      firstName={user.firstName}
                      lastName={user.lastName}
                    />
                  </li>
                  <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}>
                    <Link
                      className={styles.mobileLinkButton}
                      href={login[lang]}
                    >
                      {intl.formatMessage({ id: "Log in" })}
                    </Link>
                  </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}>
                  <a className={styles.link} href={link.href}>
                    {link.title}
                  </a>
                </li>
              ))}
            </ul>

            <ul className={styles.mobileList}>
              {topMenuMobileLinks.map(({ link }, i) => (
                <li className={styles.mobileLi} key={link.href + i}>
                  <a className={styles.mobileLink} href={link.href}>
                    {link.title}
                  </a>
                </li>
              ))}
            </ul>

            {languageSwitcher ? (
              <li className={styles.mobileLi}>{languageSwitcher}</li>
            ) : null}
          </ul>
          <div className={styles.buttonContainer}>
            <BookingButton href={bookingHref} />
            {myPagesMobileDropdown && user ? (
              <div
                role="button"
                onClick={() => toggleMyPagesMobileMenu()}
                className={styles.avatarButton}
              >
                <Avatar firstName={user.firstName} lastName={user.lastName} />
              </div>
            ) : null}
          </div>
          {isMyPagesMobileMenuOpen ? myPagesMobileDropdown : null}
        </nav>
      </div>
    </div>
  )
}