"use client"

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

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

import { MinusIcon, PlusIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

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

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

  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)
      if (childrenInAdultsBed > adults) {
        const toUpdateIndex = children.findIndex(
          (child: Child) => child.bed == BedTypeEnum.IN_ADULTS_BED
        )
        if (toUpdateIndex != -1) {
          setValue(
            `rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
            children[toUpdateIndex].age < 3 ? 1 : 2
          )
        }
      }
    }
  }

  return (
    <section className={styles.container}>
      <Caption color="uiTextHighContrast" textTransform="bold">
        {adultsLabel}
      </Caption>
      <div className={styles.counterContainer}>
        <Button
          className={styles.counterBtn}
          intent="elevated"
          onClick={() => {
            decreaseAdultsCount(roomIndex)
          }}
          size="small"
          theme="base"
          variant="icon"
          wrapping={true}
          disabled={adults == 1}
        >
          <MinusIcon color="burgundy" />
        </Button>
        <Body color="textHighContrast" textAlign="center">
          {adults}
        </Body>
        <Button
          className={styles.counterBtn}
          onClick={() => {
            increaseAdultsCount(roomIndex)
          }}
          intent="elevated"
          variant="icon"
          theme="base"
          wrapping={true}
          size="small"
          disabled={adults == 6}
        >
          <PlusIcon color="burgundy" />
        </Button>
      </div>
    </section>
  )
}
