web/apps/scandic-web/components/Current/Header/LanguageSwitcher/Desktop/index.tsx

/* eslint-disable formatjs/no-literal-string-in-jsx */

"use client"
import { useCallback, useEffect, useRef, useState } from "react"

import Link from "@scandic-hotels/design-system/Link"

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

import useLang from "@/hooks/useLang"

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

import type { Lang } from "@scandic-hotels/common/constants/language"

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

export default function Desktop({ urls }: LanguageSwitcherProps) {
  const currentLanguage = useLang()
  const [isOpen, setIsOpen] = useState(false)
  const divRef = useRef<HTMLDivElement>(null)

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

  const close = useCallback(() => {
    setIsOpen(false)
  }, [setIsOpen])

  useEffect(() => {
    function handleClickOutside(evt: Event) {
      const target = evt.target as HTMLElement
      if (divRef.current && target && !divRef.current.contains(target)) {
        close()
      }
    }

    if (divRef.current) {
      document.addEventListener("click", handleClickOutside, false)
    }
    return () => {
      document.removeEventListener("click", handleClickOutside, false)
    }
  }, [close])

  const urlKeys = Object.keys(urls)

  if (urlKeys.length === 1 && urlKeys[0] === currentLanguage) {
    return (
      <div className={styles.container} ref={divRef}>
        <section className={styles.languageSwitcher}>
          <svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
            <use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
          </svg>
          {languages[currentLanguage]}
        </section>
      </div>
    )
  }

  return (
    <section className={styles.desktop}>
      <div className={styles.container} ref={divRef}>
        <button
          aria-pressed="false"
          className={styles.toggle}
          onClick={toggleOpen}
        >
          <svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
            <use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
          </svg>
          {languages[currentLanguage]}
          <span className={styles.hiddenAccessible}>Choose language</span>
          <span className={styles.caret}></span>
        </button>
        <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
          {urlKeys.map((key) => {
            const url = urls[key as Lang]?.url
            if (url) {
              return (
                <li
                  key={key}
                  className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
                >
                  {urls[key as Lang]?.isExternal ? (
                    <Link className={styles.link} href={url}>
                      {languages[key as Lang]}
                    </Link>
                  ) : (
                    <a className={styles.link} href={url}>
                      {languages[key as Lang]}
                    </a>
                  )}
                </li>
              )
            }
          })}
        </ul>
      </div>
    </section>
  )
}