"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].child)
  const increaseChildren = useGuestsRoomsStore(
    (state) => state.increaseChildren
  )
  const decreaseChildren = useGuestsRoomsStore(
    (state) => state.decreaseChildren
  )

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

  return (
    <>
      <section className={styles.container}>
        <Caption color="uiTextHighContrast" type="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={"child_" + index}
        />
      ))}
    </>
  )
}