web/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/index.tsx

"use client"

import { useState } from "react"
import { useIntl } from "react-intl"

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

import { ChevronDownIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"

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

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

type ActiveView = "actionPanel" | "cancelStay"

interface ManageStayProps {
  booking: BookingConfirmation["booking"]
  hotel: Hotel
  setBookingStatus: (status: BookingStatusEnum) => void
  bookingStatus: string | null
}

export default function ManageStay({
  booking,
  hotel,
  setBookingStatus,
  bookingStatus,
}: ManageStayProps) {
  const [isOpen, setIsOpen] = useState(false)

  const [activeView, setActiveView] = useState<ActiveView>("actionPanel")

  const intl = useIntl()

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

  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")}
            showCancelStayButton={showCancelStayButton}
          />
        )
    }
  }

  return (
    <>
      <Button variant="icon" fullWidth onClick={() => setIsOpen(true)}>
        {intl.formatMessage({ id: "Manage stay" })}
        <ChevronDownIcon width={24} height={24} color="burgundy" />
      </Button>
      <Modal isOpen={isOpen} onToggle={handleClose} withActions hideHeader>
        {renderContent()}
      </Modal>
    </>
  )
}