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

import { guestsRoomsStore } from "@/stores/guests-rooms"

import { guestRoomsSchema } from "../Forms/BookingWidget/schema"
import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import AdultSelector from "./AdultSelector"
import ChildSelector from "./ChildSelector"

import styles from "./guests-rooms-picker.module.css"

import { GuestsRoomsPickerProps } from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function GuestsRoomsPicker({
  closePicker,
}: GuestsRoomsPickerProps) {
  const intl = useIntl()
  const doneLabel = intl.formatMessage({ id: "Done" })

  const guestsData = guestsRoomsStore().rooms
  const guestRoomsValidData = guestRoomsSchema.safeParse(guestsData)
  const isInValid = !guestRoomsValidData.success
  const roomLabel = intl.formatMessage({ id: "Room" })

  // Not in MVP
  // const { increaseRoom, decreaseRoom } = guestsRoomsStore()

  return (
    <>
      {guestsData.map((room, index) => (
        <section className={styles.roomContainer} key={index}>
          <section className={styles.roomDetailsContainer}>
            <Subtitle>
              {roomLabel} {index + 1}
            </Subtitle>
            <AdultSelector roomIndex={index} />
            <ChildSelector roomIndex={index} />
          </section>
          {/* Not in MVP
           {index > 0 ? (
            <Button intent="text" onClick={() => decreaseRoom(index)}>
              Remove Room
            </Button>
          ) : null} */}
          <Divider />
        </section>
      ))}
      <footer className={styles.footer}>
        {/*  Not in MVP
        {guestsData.length < 4 ? (
          <Button intent="text" onClick={increaseRoom}>
            Add Room
          </Button>
        ) : null} */}
        <Button onClick={closePicker} disabled={isInValid}>
          {doneLabel}
        </Button>
      </footer>
    </>
  )
}