import { useIntl } from "react-intl"

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

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

type ChildSelectorProps = {
  child: Child
  index: number
  availableBedTypes?: ChildBed[]
  updateChild: (child: Child, index: number) => void
}

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) => {},
}: ChildSelectorProps) {
  const intl = useIntl()
  const ageLabel = intl.formatMessage({ id: "Age" })
  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: any, childInfo: string) {
    if (childInfo == "age") {
      child.age = selectedKey
    } else if (childInfo == "bed") {
      child.bed = selectedKey
    }
    updateChild(child, index)
  }

  return (
    <>
      <Select
        size={2}
        items={ageList}
        label={ageLabel}
        aria-label={ageLabel}
        value={child.age}
        onSelect={(key) => {
          handleOnSelect(key, "age")
        }}
        name="age"
      />
      {child.age !== -1 ? (
        <Select
          items={availableBedTypes}
          label={bedLabel}
          aria-label={bedLabel}
          value={child.bed}
          onSelect={(key) => {
            handleOnSelect(key, "bed")
          }}
          name="bed"
        />
      ) : null}
    </>
  )
}
