web/components/LanguageSwitcher/index.tsx

"use client"

import { useEffect, useRef } from "react"
import { useIntl } from "react-intl"

import { languages } from "@/constants/languages"
import useDropdownStore from "@/stores/main-menu"

import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import useLang from "@/hooks/useLang"

import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
import LanguageSwitcherContent from "./LanguageSwitcherContent"
import { languageSwitcherVariants } from "./variants"

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

import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import {
  type LanguageSwitcherProps,
  LanguageSwitcherTypesEnum,
} from "@/types/components/languageSwitcher/languageSwitcher"

export default function LanguageSwitcher({
  urls,
  type,
}: LanguageSwitcherProps) {
  const intl = useIntl()
  const currentLanguage = useLang()
  const toggleDropdown = useDropdownStore((state) => state.toggleDropdown)
  const languageSwitcherRef = useRef<HTMLDivElement>(null)
  const isFooterLanguageSwitcherOpen = useDropdownStore(
    (state) => state.isFooterLanguageSwitcherOpen
  )
  const isHeaderLanguageSwitcherOpen = useDropdownStore(
    (state) => state.isHeaderLanguageSwitcherOpen
  )
  const isHeaderLanguageSwitcherMobileOpen = useDropdownStore(
    (state) => state.isHeaderLanguageSwitcherMobileOpen
  )

  const isFooter = type === LanguageSwitcherTypesEnum.Footer
  const isHeader = !isFooter

  const position = isFooter ? "footer" : "header"
  const color = isFooter ? "pale" : "burgundy"

  const dropdownType = {
    footer: DropdownTypeEnum.FooterLanguageSwitcher,
    desktopHeader: DropdownTypeEnum.HeaderLanguageSwitcher,
    mobileHeader: DropdownTypeEnum.HeaderLanguageSwitcherMobile,
  }[type]

  const isLanguageSwitcherOpen =
    (isFooter && isFooterLanguageSwitcherOpen) ||
    (isHeader &&
      (isHeaderLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen))

  useHandleKeyUp((event: KeyboardEvent) => {
    if (event.key === "Escape" && isLanguageSwitcherOpen) {
      toggleDropdown(dropdownType)
    }
  })

  function handleClick() {
    const scrollPosition = window.scrollY
    toggleDropdown(dropdownType)

    requestAnimationFrame(() => {
      window.scrollTo(0, scrollPosition)
    })
  }

  useEffect(() => {
    function handleClickOutside(evt: Event) {
      const target = evt.target as HTMLElement
      if (
        languageSwitcherRef.current &&
        target &&
        !languageSwitcherRef.current.contains(target) &&
        isLanguageSwitcherOpen &&
        !isHeaderLanguageSwitcherMobileOpen
      ) {
        toggleDropdown(dropdownType)
      }
    }

    if (languageSwitcherRef.current) {
      document.addEventListener("click", handleClickOutside)
    }
    return () => {
      document.removeEventListener("click", handleClickOutside)
    }
  }, [
    dropdownType,
    toggleDropdown,
    isLanguageSwitcherOpen,
    isHeaderLanguageSwitcherMobileOpen,
  ])

  const classNames = languageSwitcherVariants({ color, position })

  return (
    <div className={classNames} ref={languageSwitcherRef}>
      <button
        type="button"
        className={styles.button}
        aria-label={intl.formatMessage({
          id: isLanguageSwitcherOpen
            ? "Close language menu"
            : "Open language menu",
        })}
        onClick={handleClick}
      >
        <GlobeIcon width={20} height={20} color={color} />
        <span>{languages[currentLanguage]}</span>
        <ChevronDownIcon
          className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
          width={20}
          height={20}
          color={color}
        />
      </button>

      <div
        className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
      >
        {isLanguageSwitcherOpen ? (
          <LanguageSwitcherContainer type={type}>
            <LanguageSwitcherContent
              urls={urls}
              onLanguageSwitch={() => toggleDropdown(dropdownType)}
            />
          </LanguageSwitcherContainer>
        ) : null}
      </div>
    </div>
  )
}