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

import Image from "@/components/Image"
import Mobile from "../LanguageSwitcher/Mobile"

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

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

export default function MainMenu({
  currentLanguage,
  frontpageLinkText,
  homeHref,
  links,
  logo,
  topMenuMobileLinks,
  urls,
}: 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" />
        <button
          aria-pressed="false"
          className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
          data-js="main-nav-toggler"
          data-target="#main-menu"
          onClick={toogleIsOpen}
          type="button"
        >
          <span className={styles.iconBars}></span>
          <span className={styles.hiddenAccessible}>Menu</span>
        </button>

        <a
          className={styles.logoLink}
          href={homeHref}
          id="scandic-logo"
          itemProp="url"
        >
          <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>

        <nav>
          <ul
            className={`${styles.list} ${isOpen ? styles.isOpen : ""}`}
            data-collapsable="main-menu"
            id="main-menu"
          >
            {links.map(link => (
              <li
                className={styles.li}
                key={link.href}
              >
                <a
                  className={styles.link}
                  href={link.href}
                >
                  {link.title}
                </a>
              </li>
            ))}

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

            {urls ? (
              <li className={styles.mobileLi}>
                <Mobile currentLanguage={currentLanguage} urls={urls} />
              </li>
            ) : null}
          </ul>
        </nav>
      </div>
    </div>
  )
}