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

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

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

import ChildInfoSelector from "./ChildInfoSelector"

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

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 } = useFormContext()
  const children = guestsRoomsStore().rooms[roomIndex].children
  const { increaseChildren, decreaseChildren, childCount } = guestsRoomsStore()

  function updateChildrenCount(direction: string, roomIndex: number) {
    if (direction == "up" && children.length < 5) {
      increaseChildren(roomIndex)
      setValue(`rooms.${roomIndex}.children.${children.length}`, {
        age: -1,
        bed: -1,
      })
    } else if (children.length > 0) {
      decreaseChildren(roomIndex)
      let newChildrenList = JSON.parse(JSON.stringify(children))
      newChildrenList.pop()
      setValue(`rooms.${roomIndex}.children`, newChildrenList)
    }
  }

  return (
    <>
      <section className={styles.container}>
        <Caption>{childrenLabel}</Caption>
        <Button
          intent="text"
          size="small"
          onClick={() => updateChildrenCount("down", roomIndex)}
        >
          -
        </Button>
        <span className={styles.textCenter}>{children.length}</span>
        <Button
          intent="text"
          size="small"
          onClick={() => updateChildrenCount("up", roomIndex)}
        >
          +
        </Button>
      </section>
      {children.map((child, index) => (
        <div key={index} className={styles.childInfoContainer}>
          <ChildInfoSelector
            roomIndex={roomIndex}
            index={index}
            child={child}
          />
        </div>
      ))}
    </>
  )
}