"use client"

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

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

import Caption from "@/components/TempDesignSystem/Text/Caption"

import Counter from "../Counter"
import ChildInfoSelector from "./ChildInfoSelector"

import styles from "./child-selector.module.css"

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

export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
  const intl = useIntl()
  const childrenLabel = intl.formatMessage({ id: "Children" })
  const { setValue, trigger } = useFormContext<BookingWidgetSchema>()
  const children = useGuestsRoomsStore(
    (state) => state.rooms[roomIndex].children
  )
  const increaseChildren = useGuestsRoomsStore.use.increaseChildren()
  const decreaseChildren = useGuestsRoomsStore.use.decreaseChildren()

  function increaseChildrenCount(roomIndex: number) {
    if (children.length < 5) {
      increaseChildren(roomIndex)
      setValue(`rooms.${roomIndex}.children.${children.length}`, {
        age: -1,
        bed: -1,
      })
      trigger("rooms")
    }
  }
  function decreaseChildrenCount(roomIndex: number) {
    if (children.length > 0) {
      const newChildrenList = decreaseChildren(roomIndex)
      setValue(`rooms.${roomIndex}.children`, newChildrenList)
      trigger("rooms")
    }
  }

  return (
    <>
      <section className={styles.container}>
        <Caption color="uiTextHighContrast" textTransform="bold">
          {childrenLabel}
        </Caption>
        <Counter
          count={children.length}
          handleOnDecrease={() => {
            decreaseChildrenCount(roomIndex)
          }}
          handleOnIncrease={() => {
            increaseChildrenCount(roomIndex)
          }}
          disableDecrease={children.length == 0}
          disableIncrease={children.length == 5}
        />
      </section>
      {children.map((child, index) => (
        <ChildInfoSelector
          roomIndex={roomIndex}
          index={index}
          child={child}
          key={index}
        />
      ))}
    </>
  )
}