import { currentAboutLinks, currentSponsoringLinks, currentWifiLinks } from "@/constants/current/links"

import Desktop from "./LanguageSwitcher/Desktop"
import Mobile from "./LanguageSwitcher/Mobile"

import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
import type { HeaderProps } from "@/types/components/current/header"

const paths: Record<string, LanguageSwitcherLink[]> = {
  "/kundeservice/sporsmal-og-svar/bruk-av-nettsiden": currentAboutLinks,
  "/utforsk-scandic/wifi": currentWifiLinks,
  "/vi-sponser": currentSponsoringLinks,
}

const currentLanguage = "Norsk"

export default function NoHeader({ pathname }: HeaderProps) {
  const links = paths?.[pathname] ?? null

  return (
    <header className="header" role="banner">
      <div className="offline-banner hidden">
        Du er offline. Noe innhold kan være utdatert.
        <button type="button" className="reload">Last inn på nytt</button>
      </div>
      <div className="l-section main-header navigation-bar" data-js="main-nav-bar">
        <div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
          <div className="l-section__inner">
            <a href="https://www.scandichotels.no" className="scandic-main-page-link">Tilbake til scandichotels.no</a>
            <ul className="nav-secondary navbar-login">
              <li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
                {links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
              </li>
              <li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
                <a className="nav-secondary__item__link" href="https://www.scandichotels.no/hotelreservation/get-booking">Vis/Avbestill din booking</a>
              </li>
              <li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
                <a className="nav-secondary__item__link" href="https://www.scandichotels.no/jobb-hos-oss/ledige-stillinger">Jobb hos oss</a>
              </li>
              <li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
                <a className="nav-secondary__item__link" href="https://www.scandichotels.no/for-bedrifter">For bedrifter</a>
              </li>
              <li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
                <a className="nav-secondary__item__link" href="https://www.scandichotels.no/scandic-friends">Om Scandic Friends</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="navigation-bar__main">
          <div className="l-section__inner l-section__inner--small-no-padding" itemScope={undefined} itemType="http://schema.org/Organization">
            <meta itemProp="name" content="Scandic" />
            <button type="button" className="navigation-bar__main__expander" data-js="main-nav-toggler" data-target="#main-menu" aria-pressed="false">
              <span className="icon-bars"></span><span className="hidden--accessible">Menu</span>
            </button>
            <a id="scandic-logo" className="navigation-bar__main__logo hidden-medium " href="https://www.scandichotels.no" itemProp="url">
              <span className="hidden--accessible">Tilbake til scandichotels.no</span>
              <img src="/Static/img/scandic-logotype.svg" data-js="scandiclogoimg" alt="Scandic Hotels logo" height="22" data-nosvgsrc="/Static/img/scandic-logotype.png" itemProp="logo" />
            </a>
            <ul id="navbar-header-design" className="hidden hidden-medium hidden-large nav-primary__header">
              <li className="nav-primary__scandicfriendslogo">
                <img src="/Static/img/icons/scandic-friends/icon-scandic-friends.svg" width="35" height="35" />
              </li>
            </ul>
            <nav>
              <ul id="main-menu" className="nav-primary is-collapsed" data-collapsable="main-menu">
                <li className="nav-primary__item nav-primary__item--primary hidden-large hidden-small  hidden-xsmall hidden-xxsmall" aria-hidden="true">
                  <a className="navigation-bar__main__logo" href="https://www.scandichotels.no">
                    <img src="/Static/img/scandic-logotype.svg" data-js="scandiclogoimg" alt="Scandic Hotels logo" height="22" data-nosvgsrc="/Static/img/scandic-logotype.png" />
                    <span className="hidden--accessible">Tilbake til scandichotels.no</span>
                  </a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.no/hotell">Hoteller og destinasjoner</a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.no/reiseguider">Reiseguider</a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.no/moter-og-konferanser">Møter og konferanser</a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.no/utforsk-scandic">Utforsk Scandic</a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.no/hotelltilbud">Tilbud</a>
                </li>
                <li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
                  <a href="https://www.scandichotels.no/scandic-friends">Om Scandic Friends</a>
                </li>
                <li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
                  <a href="https://www.scandichotels.no/for-bedrifter">For bedrifter</a>
                </li>
                <li className="nav-primary__item hidden-medium hidden-large">
                  {links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </header>
  )
}