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

import { languages } from "@/constants/languages"

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

import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"

export default function Mobile({
  currentLanguage,
  urls,
}: LanguageSwitcherProps) {
  const [isOpen, setIsOpen] = useState(false)

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

  return (
    <div className="navbar-language-selector">
      <button
        aria-pressed="false"
        className="navbar-language-selector__toggler "
        data-js="collapsible-toggler"
        data-target="language-menu"
        onClick={toggleOpen}
      >
        {currentLanguage}{" "}
        <span className={`${styles.arrow} ${isOpen ? styles.open : ""}`}></span>
        <span className="hidden--accessible">Choose language</span>
      </button>
      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`} data-collapsable="language-menu">
        <li className={`navbar-language-selector__item ${currentLanguage === languages.en ? "is-active" : ""}`}>
          <a href={urls.en?.url}>{languages.en}</a>
        </li>
        <li className={`navbar-language-selector__item ${currentLanguage === languages.sv ? "is-active" : ""}`}>
          <a href={urls.sv?.url}>{languages.sv}</a>
        </li>
        <li className={`navbar-language-selector__item ${currentLanguage === languages.no ? "is-active" : ""}`}>
          <a href={urls.no?.url}>{languages.no}</a>
        </li>
        {/* When we have 6 languages in Contenstack, danish url should come from urls.da?.url */}
        <li className={`navbar-language-selector__item ${currentLanguage === languages.da ? "is-active" : ""}`}>
          <a href="https://www.scandichotels.dk/">{languages.da}</a>
        </li>
        <li className={`navbar-language-selector__item ${currentLanguage === languages.fi ? "is-active" : ""}`}>
          <a href={urls.fi?.url}>{languages.fi}</a>
        </li>
        <li className={`navbar-language-selector__item ${currentLanguage === languages.de ? "is-active" : ""}`}>
          <a href={urls.de?.url}>{languages.de}</a>
        </li>
      </ul>
    </div>
  )
}