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

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

import { guestRoomsSchema } from "../Forms/BookingWidget/schema"
import { CloseLarge } from "../Icons"
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 rooms = useGuestsRoomsStore((state) => state.rooms)
  const guestRoomsValidData = guestRoomsSchema.safeParse(rooms)
  const isInValid = !guestRoomsValidData.success
  const roomLabel = intl.formatMessage({ id: "Room" })

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

  return (
    <>
      <header className={styles.header}>
        <button type="button" className={styles.close} onClick={closePicker}>
          <CloseLarge />
        </button>
      </header>
      {rooms.map((room, index) => (
        <section className={styles.roomContainer} key={index}>
          <section className={styles.roomDetailsContainer}>
            <Subtitle type="two" className={styles.roomHeading}>
              {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 color="primaryLightSubtle" />
        </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}
          className={styles.hideOnMobile}
          intent="tertiary"
          theme="base"
          size="small"
        >
          {doneLabel}
        </Button>
        <Button
          onClick={closePicker}
          disabled={isInValid}
          className={styles.hideOnDesktop}
          intent="tertiary"
          theme="base"
          size="large"
        >
          {doneLabel}
        </Button>
      </footer>
    </>
  )
}