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

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

import Form from "./Form"

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

export default function RoomPackageFilterPopover() {
  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>

      <Popover placement="bottom end" className={styles.popover}>
        <Dialog className={styles.popoverDialog}>
          <Form close={() => setIsOpen(false)} />
        </Dialog>
      </Popover>
    </DialogTrigger>
  )
}
