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

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

import Alert from "@/components/TempDesignSystem/Alert"
import useLang from "@/hooks/useLang"

import { ModalContent } from "../ManageStay/ModalContent"
import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
import useCancelStay from "./hooks/useCancelStay"
import { CancelStayConfirmation } from "./Confirmation"
import { FinalConfirmation } from "./FinalConfirmation"
import { formatStayDetails, getDefaultRooms } from "./utils"

import {
  type CancelStayProps,
  cancelStaySchema,
  type FormValues,
} from "@/types/components/hotelReservation/myStay/cancelStay"
import { AlertTypeEnum } from "@/types/enums/alert"

const MODAL_STEPS = {
  INITIAL: 1,
  CONFIRMATION: 2,
}

export default function CancelStay({
  booking,
  hotel,
  setBookingStatus,
  handleCloseModal,
  handleBackToManageStay,
}: CancelStayProps) {
  const intl = useIntl()
  const lang = useLang()
  const { rooms: roomDetails } = useMyStayRoomDetailsStore()

  const { mainRoom } = booking

  const form = useForm<FormValues>({
    resolver: zodResolver(cancelStaySchema),
    defaultValues: {
      rooms: getDefaultRooms(booking),
    },
  })

  const {
    currentStep,
    isLoading,
    handleCancelStay,
    handleCloseCancelStay,
    handleForward,
  } = useCancelStay({
    booking,
    setBookingStatus,
    handleCloseModal,
    handleBackToManageStay,
    getFormValues: form.getValues,
  })

  const stayDetails = formatStayDetails({ booking, lang, intl })
  const isFirstStep = currentStep === MODAL_STEPS.INITIAL

  function getModalCopy() {
    if (isFirstStep) {
      return {
        title: intl.formatMessage({ id: "Cancel stay" }),
        primaryLabel: intl.formatMessage({ id: "Cancel stay" }),
        secondaryLabel: intl.formatMessage({ id: "Back" }),
      }
    } else {
      return {
        title: intl.formatMessage({ id: "Confirm cancellation" }),
        primaryLabel: intl.formatMessage({ id: "Confirm cancellation" }),
        secondaryLabel: intl.formatMessage({ id: "Don't cancel" }),
      }
    }
  }

  function getModalContent() {
    if (mainRoom && isFirstStep)
      return (
        <CancelStayConfirmation
          hotel={hotel}
          booking={booking}
          stayDetails={stayDetails}
          roomDetails={roomDetails}
        />
      )

    if (mainRoom && !isFirstStep)
      return <FinalConfirmation booking={booking} stayDetails={stayDetails} />

    if (!mainRoom && isFirstStep)
      return (
        <Alert
          type={AlertTypeEnum.Info}
          heading={intl.formatMessage({
            id: "Contact the person who booked the stay",
          })}
          text={intl.formatMessage({
            id: "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.",
          })}
        />
      )
  }

  const { rooms } = form.watch()
  const isFormValid = rooms?.some((room) => room.checked)

  return (
    <FormProvider {...form}>
      <ModalContent
        title={getModalCopy().title}
        onClose={handleCloseModal}
        content={getModalContent()}
        primaryAction={
          mainRoom
            ? {
                label: getModalCopy().primaryLabel,
                onClick: isFirstStep ? handleForward : handleCancelStay,
                intent: isFirstStep ? "secondary" : "primary",
                isLoading: isLoading,
                disabled: !isFormValid,
              }
            : null
        }
        secondaryAction={{
          label: getModalCopy().secondaryLabel,
          onClick: isFirstStep ? handleCloseCancelStay : handleCloseModal,
          intent: "text",
        }}
      />
    </FormProvider>
  )
}