"use client"
import { useState } from "react"

import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"

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

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

export function MainMenu({
  frontpageLinkText,
  homeHref,
  links,
  logo,
  topMenuMobileLinks,
  languageSwitcher,
}: MainMenuProps) {
  const [isOpen, setIsOpen] = useState(false)

  function toogleIsOpen() {
    setIsOpen((prevIsOpen) => !prevIsOpen)
  }

  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} ${isOpen ? styles.expanded : ""}`}
            onClick={toogleIsOpen}
            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} ${isOpen ? styles.isOpen : ""}`}
          >
            <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}>
            <Button>Book</Button>
          </div> */}
        </nav>
      </div>
    </div>
  )
}
