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

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

import Form from "./Form"

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

export default function RoomPackageFilterModal() {
  const intl = useIntl()
  const [isOpen, setIsOpen] = useState(false)

  return (
    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
      <ChipButton variant="Outlined">
        {intl.formatMessage({ defaultMessage: "Special needs" })}
        <MaterialIcon
          icon="keyboard_arrow_down"
          size={20}
          color="CurrentColor"
        />
      </ChipButton>

      <ModalOverlay className={styles.modalOverlay} isDismissable>
        <Modal className={styles.modal}>
          <Dialog className={styles.modalDialog}>
            <div className={styles.header}>
              <Typography variant="Title/Subtitle/md">
                <h3>
                  {intl.formatMessage({ defaultMessage: "Special needs" })}
                </h3>
              </Typography>
              <IconButton
                theme="Black"
                style="Muted"
                onPress={() => setIsOpen(false)}
              >
                <MaterialIcon icon="close" size={24} color="CurrentColor" />
              </IconButton>
            </div>
            <Form close={() => setIsOpen(false)} />
          </Dialog>
        </Modal>
      </ModalOverlay>
    </DialogTrigger>
  )
}
