"use client"
import { useIntl } from "react-intl"

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

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

import { AlertTypeEnum } from "@/types/enums/alert"

interface AlertsProps extends React.PropsWithChildren {
  closeModal: () => void
}

export default function Alerts({ children, closeModal }: AlertsProps) {
  const intl = useIntl()
  const mainRoom = useMyStayStore((state) => state.bookedRoom)

  if (!mainRoom) {
    const title = intl.formatMessage({ defaultMessage: "Cancel stay" })
    return (
      <Modal.Content>
        <Modal.Content.Header handleClose={closeModal} title={title} />
        <Modal.Content.Body>
          <Alert
            type={AlertTypeEnum.Info}
            heading={intl.formatMessage({
              defaultMessage: "Contact the person who booked the stay",
            })}
            text={intl.formatMessage({
              defaultMessage:
                "As this is a multiroom stay, the cancellation has to be done by the person who made the booking. Please call 08-517 517 00 to talk to our customer service if you would need further assistance.",
            })}
          />
        </Modal.Content.Body>
        <Modal.Content.Footer>
          <Modal.Content.Footer.Secondary onClick={closeModal}>
            {intl.formatMessage({ defaultMessage: "Back" })}
          </Modal.Content.Footer.Secondary>
        </Modal.Content.Footer>
      </Modal.Content>
    )
  }

  return <>{children}</>
}
