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

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

import { CloseLarge, PlusCircleIcon } from "../Icons"
import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import { Tooltip } from "../TempDesignSystem/Tooltip"
import AdultSelector from "./AdultSelector"
import ChildSelector from "./ChildSelector"

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

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

export default function GuestsRoomsPicker({
  closePicker,
}: GuestsRoomsPickerProps) {
  const intl = useIntl()
  const doneLabel = intl.formatMessage({ id: "Done" })
  const roomLabel = intl.formatMessage({ id: "Room" })
  const disabledBookingOptionsHeader = intl.formatMessage({
    id: "Disabled booking options header",
  })
  const disabledBookingOptionsText = intl.formatMessage({
    id: "Disabled booking options text",
  })
  const addRoomLabel = intl.formatMessage({ id: "Add Room" })

  const { getFieldState } = useFormContext<BookingWidgetSchema>()

  const rooms = useGuestsRoomsStore.use.rooms()

  // Not in MVP
  // const increaseRoom = useGuestsRoomsStore.use.increaseRoom()
  // const decreaseRoom = useGuestsRoomsStore.use.decreaseRoom()

  return (
    <div className={styles.pickerContainer}>
      <header className={styles.header}>
        <button type="button" className={styles.close} onClick={closePicker}>
          <CloseLarge />
        </button>
      </header>
      <div className={styles.contentContainer}>
        {rooms.map((room, index) => (
          <div 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" />
          </div>
        ))}
      </div>
      <footer className={styles.footer}>
        <Tooltip
          heading={disabledBookingOptionsHeader}
          text={disabledBookingOptionsText}
          position="bottom"
          arrow="left"
        >
          {rooms.length < 4 ? (
            <Button
              intent="text"
              variant="icon"
              wrapping
              disabled
              theme="base"
              className={styles.addRoom}
            >
              <PlusCircleIcon />
              {addRoomLabel}
            </Button>
          ) : null}
        </Tooltip>
        <Button
          onClick={closePicker}
          disabled={getFieldState("rooms").invalid}
          className={styles.hideOnMobile}
          intent="tertiary"
          theme="base"
          size="small"
        >
          {doneLabel}
        </Button>
        <Button
          onClick={closePicker}
          disabled={getFieldState("rooms").invalid}
          className={styles.hideOnDesktop}
          intent="tertiary"
          theme="base"
          size="large"
        >
          {doneLabel}
        </Button>
      </footer>
    </div>
  )
}