import React, { useState } from "react"
import Select from "react-select"
import { SelectInputProps } from "./interfaces"
import * as S from "./styles"
import Option from "./components/Option"

const SelectInput:React.FC<SelectInputProps> = ({
  className,
  label,
  onChange,
  placeholder,
  disabled,
  options,
  value,
  isSearchable,
  isClearable,
}) => {
  const [valueSelected, setValueSelected] = useState(value)

  const components = {
    Option
  }

  return (
    <S.Container className={className}>
      { label ? <S.Label>{label}</S.Label> : null }
      <Select
        placeholder={placeholder}
        className="react-select-container"
        classNamePrefix="react-select"
        defaultValue={valueSelected || ''}
        options={options}
        isDisabled={disabled}
        isSearchable={isSearchable}
        isClearable={isClearable}
        components={components}
        onChange={(values: any) => {
          setValueSelected(values) 
          onChange(values)
        }}
      />
    </S.Container>
  )
}

export default SelectInput