"use client"

import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"

import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import { useMyStayRoomDetailsStore } from "../../stores/myStayRoomDetailsStore"
import PriceContainer from "../Pricecontainer"

import styles from "../cancelStay.module.css"

import type {
  CancelStayConfirmationProps,
  FormValues,
} from "@/types/components/hotelReservation/myStay/cancelStay"

export function CancelStayConfirmation({
  hotel,
  booking,
  stayDetails,
}: CancelStayConfirmationProps) {
  const intl = useIntl()
  const { getValues } = useFormContext<FormValues>()
  const { rooms: roomDetails } = useMyStayRoomDetailsStore()

  return (
    <>
      <div className={styles.modalText}>
        <Body color="uiTextHighContrast">
          {intl.formatMessage(
            {
              id: "Are you sure you want to cancel your stay at {hotel} from {checkInDate} to {checkOutDate}? This can't be reversed.",
            },
            {
              hotel: hotel.name,
              checkInDate: stayDetails.checkInDate,
              checkOutDate: stayDetails.checkOutDate,
            }
          )}
        </Body>
        <Caption color="uiTextHighContrast">
          {intl.formatMessage({ id: "No charges were made." })}
        </Caption>
      </div>
      {booking.multiRoom && (
        <>
          <Body color="uiTextHighContrast" textTransform="bold">
            {intl.formatMessage({ id: "Select rooms" })}
          </Body>

          <div className={styles.rooms}>
            {getValues("rooms").map((room, index) => {
              // Find room details from store by confirmationNumber
              const roomDetail = roomDetails.find(
                (detail) => detail.id === room.confirmationNumber
              )

              return (
                <div key={room.id} className={styles.roomContainer}>
                  <Checkbox
                    name={`rooms.${index}.checked`}
                    registerOptions={{
                      disabled: !roomDetail?.isCancelable,
                    }}
                  >
                    <div className={styles.roomInfo}>
                      <Caption color="uiTextHighContrast">
                        {intl.formatMessage(
                          { id: "Room {roomIndex}" },
                          {
                            roomIndex: index + 1,
                          }
                        )}
                      </Caption>
                      {roomDetail && (
                        <>
                          <Body color="uiTextHighContrast">
                            {roomDetail.roomName}
                          </Body>
                        </>
                      )}
                    </div>
                  </Checkbox>
                </div>
              )
            })}
          </div>
        </>
      )}
      {getValues("rooms").some((room) => room.checked) && (
        <PriceContainer booking={booking} stayDetails={stayDetails} />
      )}
    </>
  )
}
