"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 GuaranteeLateArrival from "../GuaranteeLateArrival"
import ActionPanel from "./ActionPanel"

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

type ActiveView = "actionPanel" | "cancelStay" | "guaranteeLateArrival"

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

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

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

  const intl = useIntl()

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

  const showGuaranteeButton =
    bookingStatus !== BookingStatusEnum.Cancelled && !booking.guaranteeInfo

  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}
          />
        )
      case "guaranteeLateArrival":
        return (
          <GuaranteeLateArrival
            booking={booking}
            handleCloseModal={handleClose}
            handleBackToManageStay={handleBack}
            savedCreditCards={savedCreditCards}
            refId={refId}
          />
        )
      default:
        return (
          <ActionPanel
            booking={booking}
            hotel={hotel}
            onCancelClick={() => setActiveView("cancelStay")}
            onGuaranteeClick={() => setActiveView("guaranteeLateArrival")}
            showCancelStayButton={showCancelStayButton}
            showGuaranteeButton={showGuaranteeButton}
          />
        )
    }
  }

  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>
    </>
  )
}