web/components/HotelReservation/MyStay/ManageStay/index.tsx

"use client"
import { motion } from "framer-motion"
import { useEffect, useState } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl"

import { BookingStatusEnum } from "@/constants/booking"

import { ChevronDownIcon } from "@/components/Icons"
import {
  type AnimationState,
  AnimationStateEnum,
} from "@/components/Modal/modal"
import { slideFromTop } from "@/components/Modal/motionVariants"
import Button from "@/components/TempDesignSystem/Button"

import CancelStay from "../CancelStay"
import ActionPanel from "./ActionPanel"

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

import type { Hotel } from "@/types/hotel"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

type ActiveView = "actionPanel" | "cancelStay"

export default function ManageStay({
  booking,
  hotel,
  setBookingStatus,
  bookingStatus,
}: {
  booking: BookingConfirmation["booking"]
  hotel: Hotel
  setBookingStatus: (status: BookingStatusEnum) => void
  bookingStatus: string | null
}) {
  const [isOpen, setIsOpen] = useState(false)
  const [animation, setAnimation] = useState<AnimationState>(
    AnimationStateEnum.visible
  )
  const [activeView, setActiveView] = useState<ActiveView>("actionPanel")

  const intl = useIntl()

  const MotionOverlay = motion(ModalOverlay)
  const MotionModal = motion(Modal)

  const showCancelButton =
    bookingStatus !== BookingStatusEnum.Cancelled && booking.isCancelable

  useEffect(() => {
    if (typeof isOpen === "boolean") {
      setAnimation(
        isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
      )
    }
    if (isOpen === undefined) {
      setAnimation(AnimationStateEnum.unmounted)
    }
  }, [isOpen])

  function modalStateHandler(newAnimationState: AnimationState) {
    setAnimation((currentAnimationState) =>
      newAnimationState === AnimationStateEnum.hidden &&
      currentAnimationState === AnimationStateEnum.hidden
        ? AnimationStateEnum.unmounted
        : currentAnimationState
    )
  }

  function handleClose() {
    setIsOpen(false)
    setActiveView("actionPanel")
  }
  function handleBack() {
    setActiveView("actionPanel")
  }

  function renderContent() {
    switch (activeView) {
      case "cancelStay":
        return (
          <CancelStay
            booking={booking}
            hotel={hotel}
            setBookingStatus={() =>
              setBookingStatus(BookingStatusEnum.Cancelled)
            }
            handleCloseModal={handleClose}
            handleBackToManageStay={handleBack}
          />
        )
      default:
        return (
          <ActionPanel
            booking={booking}
            hotel={hotel}
            onCancelClick={() => setActiveView("cancelStay")}
            showCancelButton={showCancelButton}
          />
        )
    }
  }

  return (
    <>
      <Button variant="icon" fullWidth onClick={() => setIsOpen(true)}>
        {intl.formatMessage({ id: "Manage stay" })}
        <ChevronDownIcon width={24} height={24} color="burgundy" />
      </Button>
      <MotionOverlay
        isOpen={isOpen}
        className={styles.overlay}
        initial={"hidden"}
        onAnimationComplete={modalStateHandler}
        onOpenChange={handleClose}
        isDismissable
      >
        <MotionModal
          className={styles.modal}
          initial={"hidden"}
          animate={animation}
          variants={slideFromTop}
        >
          <Dialog
            className={styles.dialog}
            aria-label={intl.formatMessage({ id: "Dialog" })}
          >
            {renderContent()}
          </Dialog>
        </MotionModal>
      </MotionOverlay>
    </>
  )
}