import { useIntl } from "react-intl"

import Select from "@/components/TempDesignSystem/Select"

import {
  Child,
  ChildInfoSelectorProps,
} from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function ChildInfoSelector({
  child = { age: -1, bed: -1 },
  index = 0,
  availableBedTypes = [
    { label: "In adults bed", value: 0 },
    { label: "In crib", value: 1 },
    { label: "In extra bed", value: 2 },
  ],
  updateChild = (child: Child, index: number) => {},
  isValid,
}: 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 ageList = [
    { label: "0", value: 0 },
    { label: "1", value: 1 },
    { label: "2", value: 2 },
    { label: "3", value: 3 },
    { label: "4", value: 4 },
    { label: "5", value: 5 },
    { label: "6", value: 6 },
    { label: "7", value: 7 },
    { label: "8", value: 8 },
    { label: "9", value: 9 },
    { label: "10", value: 10 },
    { label: "11", value: 11 },
    { label: "12", value: 12 },
  ]

  function handleOnSelect(selectedKey: number, childInfo: string) {
    if (childInfo == "age") {
      child.age = selectedKey
    } else if (childInfo == "bed") {
      child.bed = selectedKey
    }
    updateChild(child, index)
  }

  return (
    <>
      <div>
        <Select
          required={true}
          items={ageList}
          label={ageLabel}
          aria-label={ageLabel}
          value={child.age}
          onSelect={(key) => {
            handleOnSelect(parseInt(key.toString()), "age")
          }}
          name="age"
          placeholder={ageLabel}
        />
        {!isValid && child.age < 0 ? <span>{ageReqdErrMsg}</span> : null}
      </div>
      <div>
        {child.age !== -1 ? (
          <Select
            items={availableBedTypes}
            label={bedLabel}
            aria-label={bedLabel}
            value={child.bed}
            onSelect={(key) => {
              handleOnSelect(parseInt(key.toString()), "bed")
            }}
            name="bed"
            placeholder={bedLabel}
          />
        ) : null}
      </div>
    </>
  )
}