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

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

import { CloseLargeIcon, PlusCircleIcon, PlusIcon } 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 adding room",
  })
  const addRoomLabel = intl.formatMessage({ id: "Add Room" })

  const { getFieldState } = useFormContext<BookingWidgetSchema>()

  const rooms = useGuestsRoomsStore((state) => state.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}>
          <CloseLargeIcon />
        </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 className={styles.addRoomMobileContainer}>
          <Tooltip
            heading={disabledBookingOptionsHeader}
            text={disabledBookingOptionsText}
            position="top"
            arrow="left"
          >
            {rooms.length < 4 ? (
              <Button
                intent="text"
                variant="icon"
                wrapping
                disabled
                theme="base"
                fullWidth
              >
                <PlusIcon />
                {addRoomLabel}
              </Button>
            ) : null}
          </Tooltip>
        </div>
      </div>
      <footer className={styles.footer}>
        <div className={styles.hideOnMobile}>
          <Tooltip
            heading={disabledBookingOptionsHeader}
            text={disabledBookingOptionsText}
            position="top"
            arrow="left"
          >
            {rooms.length < 4 ? (
              <Button
                intent="text"
                variant="icon"
                wrapping
                disabled
                theme="base"
              >
                <PlusCircleIcon />
                {addRoomLabel}
              </Button>
            ) : null}
          </Tooltip>
        </div>
        <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>
  )
}
