"use client"

import { useState } from "react"
import { Dialog, Modal } from "react-aria-components"
import { useIntl } from "react-intl"

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

import { UserMenu } from "../UserMenu"

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

export function MobileMenu({ children }: React.PropsWithChildren) {
  const intl = useIntl()

  const closeMsg = intl.formatMessage({
    id: "header.closeMenu",
    defaultMessage: "Close menu",
  })
  const openMsg = intl.formatMessage({
    id: "header.openMenu",
    defaultMessage: "Open menu",
  })

  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className={styles.mobileMenu}>
      <UserMenu isMobile={true} />
      <Button
        variant={"Text"}
        type="button"
        className={`${styles.hamburger} ${isOpen ? styles.isExpanded : ""}`}
        aria-label={isOpen ? closeMsg : openMsg}
        onPress={() => {
          window.scrollTo(0, 0)
          setIsOpen(!isOpen)
        }}
      >
        <span className={styles.bar} />
      </Button>
      <Modal className={styles.modal} isOpen={isOpen}>
        <Dialog
          className={styles.dialog}
          aria-label={intl.formatMessage({
            id: "header.menu",
            defaultMessage: "Menu",
          })}
        >
          {children}
        </Dialog>
      </Modal>
    </div>
  )
}