"use client"
import { useCallback } from "react"
import { useIntl } from "react-intl"

import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"

import { EditIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import type { Room as SelectedRateRoom } from "@/types/components/hotelReservation/selectRate/selectRate"
import type { Room } from "@/types/hotel"

interface SelectedRoomPanelProps {
  roomIndex: number
  room: SelectedRateRoom
  roomCategories: Room[]
}

export default function SelectedRoomPanel({
  roomIndex,
  room,
  roomCategories,
}: SelectedRoomPanelProps) {
  const intl = useIntl()
  const { rateSummary, modifyRate } = useRateSelectionStore()

  const selectedRate = rateSummary[roomIndex]
  const images = roomCategories.find((roomCategory) =>
    roomCategory.roomTypes.some(
      (roomType) => roomType.code === selectedRate?.roomTypeCode
    )
  )?.images

  const handleModify = useCallback(() => {
    modifyRate(roomIndex)
  }, [modifyRate, roomIndex])

  return (
    <div className={styles.selectedRoomPanel}>
      <div>
        <Caption type="bold">
          {intl.formatMessage(
            {
              id: "Room {roomIndex}",
            },
            {
              roomIndex: roomIndex + 1,
            }
          )}
        </Caption>
        <Subtitle>
          {selectedRate?.roomType},{" "}
          {intl.formatMessage(
            {
              id: room.childrenInRoom?.length
                ? "{adults} adults, {children} children"
                : "{adults} adults",
            },
            {
              adults: room.adults,
              children: room.childrenInRoom?.length,
            }
          )}
        </Subtitle>
        <Caption>
          {selectedRate?.priceName}, {selectedRate?.priceTerm}
        </Caption>
        <Caption>
          {selectedRate?.public.localPrice.pricePerNight}{" "}
          {selectedRate?.public.localPrice.currency}/
          {intl.formatMessage({
            id: "night",
          })}
        </Caption>
      </div>
      <div className={styles.imageAndModifyButtonContainer}>
        {images?.[0]?.imageSizes?.tiny && (
          <div className={styles.imageContainer}>
            <Image
              src={images[0].imageSizes.tiny}
              alt={selectedRate?.roomType ?? images[0].metaData?.altText ?? ""}
              fill
            />
          </div>
        )}
        <div className={styles.modifyButtonContainer}>
          <Button variant="icon" size="small" onClick={handleModify}>
            <EditIcon />
            {intl.formatMessage({
              id: "Modify",
            })}
          </Button>
        </div>
      </div>
    </div>
  )
}