import React, { forwardRef } from "react"
import PropTypes from "prop-types"
import { SelectParent, Select, Option } from "./select-menu"
import AutoComplete from "./autocomplete"

const TYPES = {
  select: SelectParent,
  autocomplete: AutoComplete,
}

const SelectMenu = forwardRef(({ type = "select", ...props }, ref) => {
  if(props.async || props.create) type = "autocomplete"
  const Component = TYPES[type]
  return <Component {...props} ref={ref} />
})

export default SelectMenu

export { Select, Option }

function Separator() {
  return <div className="border-b border-gray-200 my-1" role="separator"></div>
}
export const separator = Separator()


SelectMenu.propTypes = {
  type : PropTypes.oneOf(["select", "autocomplete"]),
  className: PropTypes.string,
  label: PropTypes.string,
  "aria-label": PropTypes.string,
  "aria-labelledby": PropTypes.string,
  name: PropTypes.string,
  error: PropTypes.bool,
  onChange: PropTypes.func,
  /** When using async, the options should be a function */
  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.func]).isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  placeholder: PropTypes.string,
  /** Setting the async prop will change the type to 'autocomplete' */
  async: PropTypes.bool,
  /** With type="autocomplete", this allows to add search input. When a string, it overrides default prefix */
  create: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  disabled: PropTypes.bool,
}
