import React from "react"
import PropTypes from "prop-types"
import SelectMenu from "../select-menu"
import Stack from "../stack"
import { useField } from "../../hooks/use-form"
import InlineValidation from "../inline-validation"

function SelectField({
  id,
  name,
  label,
  options,
  placeholder,
  value,
  autoFocus,
  onChange,
}) {
  const field = useField({ id, name, value, onChange })

  return (
    <Stack spacing={2}>
      <div>
        <SelectMenu
          id={field.id}
          className="w-full"
          autoFocus={autoFocus}
          label={label}
          name={name}
          value={field.value}
          placeholder={placeholder}
          options={options}
          onBlur={field.onBlur}
          onChange={field.onChange}
        />
      </div>
      <InlineValidation name={name} />
    </Stack>
  )
}

SelectField.propTypes = {
  id: PropTypes.number,
  name: PropTypes.string,
  label: PropTypes.string.isRequired,
  options: PropTypes.arrayOf(PropTypes.object).isRequired,
  placeholder: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  autoFocus: PropTypes.bool,
  onChange: PropTypes.func,
}

export default SelectField
