"use client"

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 styles from "./adult-selector.module.css"

import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
  const intl = useIntl()
  const adultsLabel = intl.formatMessage({ id: "Adults" })
  const { setValue } = useFormContext()
  const { adults, children } = guestsRoomsStore().rooms[roomIndex]
  const { increaseAdults, decreaseAdults } = guestsRoomsStore()

  function increaseAdultsCount(roomIndex: number) {
    if (adults < 6) {
      increaseAdults(roomIndex)
      setValue(`rooms.${roomIndex}.adults`, adults + 1)
    }
  }

  function decreaseAdultsCount(roomIndex: number) {
    if (adults > 1) {
      decreaseAdults(roomIndex)
      setValue(`rooms.${roomIndex}.adults`, adults - 1)
      let inAdultsBed = 0
      let toUpdateIndex = -1
      children.forEach((child, index) => {
        if (child.bed == BedTypeEnum["In adults bed"]) {
          inAdultsBed = inAdultsBed + 1
          if (inAdultsBed > adults - 1) toUpdateIndex = index
        }
      })
      if (toUpdateIndex != -1) {
        setValue(
          `rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
          children[toUpdateIndex].age < 3 ? 1 : 2
        )
      }
    }
  }

  return (
    <section className={styles.container}>
      <Caption>{adultsLabel}</Caption>
      <Button
        onClick={() => {
          decreaseAdultsCount(roomIndex)
        }}
        intent="text"
        size="small"
      >
        -
      </Button>
      <span className={styles.textCenter}>{adults}</span>
      <Button
        onClick={() => {
          increaseAdultsCount(roomIndex)
        }}
        intent="text"
        size="small"
      >
        +
      </Button>
    </section>
  )
}
