import { useIntl } from "react-intl"

import useDropdownStore from "@/stores/main-menu"

import { ChevronLeftIcon } from "@/components/Icons"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

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

export default function LanguageSwitcherContainer({
  children,
  type,
}: LanguageSwitcherContainerProps) {
  const { toggleDropdown } = useDropdownStore()
  const intl = useIntl()
  const isFooter = type === LanguageSwitcherTypesEnum.Footer
  const isMobileHeader = type === LanguageSwitcherTypesEnum.MobileHeader
  const position = isFooter
    ? DropdownTypeEnum.FooterLanguageSwitcher
    : DropdownTypeEnum.HamburgerMenu

  return (
    <div>
      {isMobileHeader ? (
        <div className={styles.backWrapper}>
          <button
            type="button"
            className={styles.backButton}
            onClick={() => toggleDropdown(position)}
          >
            <ChevronLeftIcon color="red" height={20} width={20} />
            <Subtitle type="one" asChild>
              <span>
                {intl.formatMessage({
                  id: "Main menu",
                })}
              </span>
            </Subtitle>
          </button>
        </div>
      ) : null}
      {isFooter ? (
        <div className={styles.closeWrapper}>
          <button
            type="button"
            className={styles.closeButton}
            aria-label={intl.formatMessage({
              id: "Close menu",
            })}
            onClick={() => toggleDropdown(position)}
          >
            <span className={styles.bar} />
          </button>
        </div>
      ) : null}
      {children}
    </div>
  )
}