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

"use client"

import { useIntl } from "react-intl"

import useLang from "@/hooks/useLang"

import { ModalContent } from "../ManageStay/ModalContent"
import useCancelStay from "./hooks/useCancelStay"
import { CancelStayConfirmation } from "./Confirmation"
import { FinalConfirmation } from "./FinalConfirmation"
import { formatStayDetails } from "./utils"

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

export interface CancelStayProps {
  booking: BookingConfirmation["booking"]
  hotel: Hotel
  setBookingStatus: () => void
  handleCloseModal: () => void
  handleBackToManageStay: () => void
}

export default function CancelStay({
  booking,
  hotel,
  setBookingStatus,
  handleCloseModal,
  handleBackToManageStay,
}: CancelStayProps) {
  const intl = useIntl()
  const lang = useLang()
  const {
    currentStep,
    isLoading,
    handleCancelStay,
    handleCloseCancelStay,
    handleForward,
  } = useCancelStay({
    booking,
    setBookingStatus,
    handleCloseModal,
    handleBackToManageStay,
  })

  const stayDetails = formatStayDetails({ booking, lang, intl })
  const isFirstStep = currentStep === 1

  return (
    <>
      <ModalContent
        title={
          isFirstStep
            ? intl.formatMessage({ id: "Cancel stay" })
            : intl.formatMessage({ id: "Confirm cancellation" })
        }
        onClose={handleCloseModal}
        content={
          isFirstStep ? (
            <CancelStayConfirmation
              hotel={hotel}
              booking={booking}
              stayDetails={stayDetails}
            />
          ) : (
            <FinalConfirmation booking={booking} stayDetails={stayDetails} />
          )
        }
        primaryAction={{
          label: isFirstStep
            ? intl.formatMessage({ id: "Cancel stay" })
            : intl.formatMessage({ id: "Confirm cancellation" }),
          onClick: isFirstStep ? handleForward : handleCancelStay,
          intent: isFirstStep ? "secondary" : "primary",
          isLoading: isLoading,
        }}
        secondaryAction={{
          label: isFirstStep
            ? intl.formatMessage({ id: "Back" })
            : intl.formatMessage({ id: "Don't cancel" }),
          onClick: isFirstStep ? handleCloseCancelStay : handleCloseModal,
          intent: "text",
        }}
      />
    </>
  )
}