"use client"
import {
  Button as ButtonRAC,
  Dialog,
  DialogTrigger,
} from "react-aria-components"
import { useIntl } from "react-intl"

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

import { useMyStayStore } from "@/stores/my-stay"

import Modal from "@/components/HotelReservation/MyStay/Modal"

import Actions from "./Actions"
import Info from "./Info"

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

export default function ManageStay() {
  const intl = useIntl()
  const allRoomsAreCancelled = useMyStayStore(
    (state) => state.allRoomsAreCancelled
  )

  const color = allRoomsAreCancelled
    ? "Icon/Interactive/Disabled"
    : "Icon/Inverted"

  const manageStay = intl.formatMessage({
    defaultMessage: "Manage stay",
  })

  return (
    <DialogTrigger>
      <ButtonRAC className={styles.trigger} isDisabled={allRoomsAreCancelled}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <span>{manageStay}</span>
        </Typography>
        <MaterialIcon color={color} icon="keyboard_arrow_down" />
      </ButtonRAC>
      <Modal>
        <Dialog className={styles.dialog}>
          {({ close }) => (
            <>
              <header className={styles.header}>
                <Typography variant="Title/Subtitle/lg">
                  <span className={styles.title}>{manageStay}</span>
                </Typography>
                <ButtonRAC className={styles.close} onPress={close}>
                  <MaterialIcon color="Icon/Feedback/Neutral" icon="close" />
                </ButtonRAC>
              </header>
              <div className={styles.content}>
                <Actions />
                <Info />
              </div>
            </>
          )}
        </Dialog>
      </Modal>
    </DialogTrigger>
  )
}
