"use client"

import { useIntl } from "react-intl"

import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"

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

import GuaranteeLateArrival from "../GuaranteeLateArrival"
import CancelStay from "./ActionPanel/Actions/CancelStay"
import ModifyStay from "./ActionPanel/Actions/ModifyStay"
import ActionPanel from "./ActionPanel"

import type { Hotel } from "@/types/hotel"
import { type CreditCard } from "@/types/user"

interface ManageStayProps {
  hotel: Hotel
  savedCreditCards: CreditCard[] | null
  refId: string
  isLoggedIn: boolean
}

export default function ManageStay({
  hotel,
  savedCreditCards,
  refId,
  isLoggedIn,
}: ManageStayProps) {
  const intl = useIntl()
  const {
    isOpen,
    activeView,
    actions: { setIsOpen, handleCloseModal },
  } = useManageStayStore()

  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
  const linkedReservationRooms = useMyStayRoomDetailsStore(
    (state) => state.linkedReservationRooms
  )

  const allRoomsCancelled =
    linkedReservationRooms.every((room) => room.isCancelled) &&
    bookedRoom.isCancelled

  function renderContent() {
    switch (activeView) {
      case "cancelStay":
        return <CancelStay hotel={hotel} />
      case "modifyStay":
        return <ModifyStay isLoggedIn={isLoggedIn} />
      case "guaranteeLateArrival":
        return (
          <GuaranteeLateArrival
            savedCreditCards={savedCreditCards}
            refId={refId}
          />
        )
      default:
        return <ActionPanel hotel={hotel} />
    }
  }

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