/* eslint-disable @next/next/no-img-element */
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[]> = {
  "/asiakaspalvelu/usein-kysytyt-kysymykset/tietoja-internetsivuista": currentAboutLinks,
  "/koe-scandic/maksuton-internetyhteys": currentSponsoringLinks,
  "/scandic-entdecken/wlan": currentWifiLinks,
}

const currentLanguage = "Suomi"

export default function FiHeader({ pathname }: HeaderProps) {
  const links = paths?.[pathname] ?? null
  return (
    <header className="header" role="banner">
      <div className="offline-banner hidden">
        Ei yhteyttä verkkoon. Osa sisällöstä saattaa olla vanhentunut.
        <button type="button" className="reload">
          Lataa uudelleen
        </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.fi"
              className="scandic-main-page-link"
            >
              Back to scandichotels.fi
            </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.fi/varaa-hotelli/hae-varaus"
                >
                  Varaukseni
                </a>
              </li>
              <li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
                <a
                  className="nav-secondary__item__link"
                  href="https://www.scandichotels.fi/tyo/avoimet-tyopaikat"
                >
                  Työpaikat
                </a>
              </li>
              <li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
                <a
                  className="nav-secondary__item__link"
                  href="https://www.scandichotels.fi/yrityksille"
                >
                  Yrityksille
                </a>
              </li>
              <li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
                <a
                  className="nav-secondary__item__link"
                  href="https://www.scandichotels.fi/scandic-friends"
                >
                  Scandic Friends
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="navigation-bar__main">
          <div
            className="l-section__inner l-section__inner--small-no-padding"
            itemScope
            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.fi"
              itemProp="url"
            >
              <span className="hidden--accessible">
                Back to scandichotels.fi
              </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>
            <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.fi"
                  >
                    <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">
                      Back to scandichotels.fi
                    </span>
                  </a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.fi/hotellit">
                    Hotellit ja kohteet
                  </a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.fi/matkavinkit">
                    Matkavinkit
                  </a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.fi/kokoukset-ja-juhlatilat">
                    Kokoukset ja juhlatilat
                  </a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.fi/koe-scandic">
                    Koe Scandic
                  </a>
                </li>
                <li className="nav-primary__item nav-primary__item--primary ">
                  <a href="https://www.scandichotels.fi/tarjoukset">
                    Tarjoukset
                  </a>
                </li>

                <li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
                  <a href="https://www.scandichotels.fi/scandic-friends">
                    Scandic Friends
                  </a>
                </li>
                <li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
                  <a href="https://www.scandichotels.fi/yrityksille">
                    Yrityksille
                  </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>
  );
}