"use client"

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

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"

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

export default function ChildInfoSelector({
  child = { age: -1, bed: -1 },
  childrenInAdultsBed,
  adults,
  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, formState } = useFormContext()

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

  function updateSelectedBed(bed: number) {
    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
  }

  //@ts-expect-error: formState is typed with FormValues
  const roomErrors = formState.errors.rooms?.[roomIndex]?.child?.[index]
  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>

      {roomErrors ? (
        <Caption color="red" className={styles.error}>
          <ErrorCircleIcon color="red" />
          {ageReqdErrMsg}
        </Caption>
      ) : null}
    </>
  )
}