import React from 'react'
import { Box, FormControl, FormLabel } from '@chakra-ui/react'
import { CreatableSelect } from 'chakra-react-select'

interface Props {
  label: string
  textField: string
  value: any
  bg: string
  handleInputChange: any
  options: any
}

const CreatableSelectInput = ({ label, textField, value, bg, handleInputChange, options}: Props) => {
  return (
    <FormControl mb="3">
      <FormLabel>{label}</FormLabel>
      <Box
        bg={bg}
        border="1px"
        borderColor="gray.500"
        rounded="md">
        <CreatableSelect
          name={textField}
          isClearable
          isMulti
          onChange={(
            values: any,
          ) => {
            if (values) {
              const valueArray = values.reduce((prev: string[], curr: any) => {
                prev.push(curr.value)
                return prev
              }, [])
              handleInputChange(textField, valueArray)
            }
          }}
          value={value}
          options={options}
        />
      </Box>
    </FormControl>
  )
}

export default CreatableSelectInput