import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

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

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)}
          >
            <MaterialIcon
              icon="arrow_back_ios"
              color="Icon/Interactive/Default"
              size={20}
            />
          </button>
        </div>
      ) : null}
      {isFooter ? (
        <div className={styles.closeWrapper}>
          <button
            type="button"
            className={styles.closeButton}
            aria-label={intl.formatMessage({
              id: "header.closeMenu",
              defaultMessage: "Close menu",
            })}
            onClick={() => toggleDropdown(position)}
          >
            <span className={styles.bar} />
          </button>
        </div>
      ) : null}
      {children}
    </div>
  )
}