"use client"

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

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

import { ErrorCircleIcon } from "@/components/Icons"
import Select from "@/components/TempDesignSystem/Select"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import {
  ChildBed,
  ChildInfoSelectorProps,
} from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function ChildInfoSelector({
  child = { age: -1, bed: -1 },
  index = 0,
  roomIndex = 0,
}: ChildInfoSelectorProps) {
  const intl = useIntl()
  const ageLabel = intl.formatMessage({ id: "Age" })
  const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
  const bedLabel = intl.formatMessage({ id: "Bed" })
  const { setValue } = useFormContext()
  const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
    (state) => state.rooms[roomIndex]
  )
  const {
    isValidated,
    updateChildAge,
    updateChildBed,
    increaseChildInAdultsBed,
    decreaseChildInAdultsBed,
  } = useGuestsRoomsStore((state) => ({
    isValidated: state.isValidated,
    updateChildAge: state.updateChildAge,
    updateChildBed: state.updateChildBed,
    increaseChildInAdultsBed: state.increaseChildInAdultsBed,
    decreaseChildInAdultsBed: state.decreaseChildInAdultsBed,
  }))

  const ageList = Array.from(Array(13).keys()).map((age) => ({
    label: `${age}`,
    value: age,
  }))

  function updateSelectedAge(age: number) {
    updateChildAge(age, roomIndex, index)
    setValue(`rooms.${roomIndex}.child.${index}.age`, age, {
      shouldValidate: true,
    })
    const availableBedTypes = getAvailableBeds(age)
    updateSelectedBed(availableBedTypes[0].value)
  }

  function updateSelectedBed(bed: number) {
    if (bed == ChildBedMapEnum.IN_ADULTS_BED) {
      increaseChildInAdultsBed(roomIndex)
    } else if (child.bed == ChildBedMapEnum.IN_ADULTS_BED) {
      decreaseChildInAdultsBed(roomIndex)
    }
    updateChildBed(bed, roomIndex, index)
    setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
  }

  const allBedTypes: ChildBed[] = [
    {
      label: intl.formatMessage({ id: "In adults bed" }),
      value: ChildBedMapEnum.IN_ADULTS_BED,
    },
    {
      label: intl.formatMessage({ id: "In crib" }),
      value: ChildBedMapEnum.IN_CRIB,
    },
    {
      label: intl.formatMessage({ id: "In extra bed" }),
      value: ChildBedMapEnum.IN_EXTRA_BED,
    },
  ]

  function getAvailableBeds(age: number) {
    let availableBedTypes: ChildBed[] = []
    if (age <= 5 && (adults > childrenInAdultsBed || child.bed === 0)) {
      availableBedTypes.push(allBedTypes[0])
    }
    if (age < 3) {
      availableBedTypes.push(allBedTypes[1])
    }
    if (age > 2) {
      availableBedTypes.push(allBedTypes[2])
    }
    return availableBedTypes
  }

  return (
    <>
      <div key={index} className={styles.childInfoContainer}>
        <div>
          <Select
            required={true}
            items={ageList}
            label={ageLabel}
            aria-label={ageLabel}
            value={child.age}
            onSelect={(key) => {
              updateSelectedAge(key as number)
            }}
            name={`rooms.${roomIndex}.child.${index}.age`}
            placeholder={ageLabel}
            maxHeight={150}
          />
        </div>
        <div>
          {child.age !== -1 ? (
            <Select
              items={getAvailableBeds(child.age)}
              label={bedLabel}
              aria-label={bedLabel}
              value={child.bed}
              onSelect={(key) => {
                updateSelectedBed(key as number)
              }}
              name={`rooms.${roomIndex}.child.${index}.age`}
              placeholder={bedLabel}
            />
          ) : null}
        </div>
      </div>
      {isValidated && child.age < 0 ? (
        <Caption color="red" className={styles.error}>
          <ErrorCircleIcon color="red" />
          {ageReqdErrMsg}
        </Caption>
      ) : null}
    </>
  )
}