import React, { useState, useMemo, useEffect } from "react"
import {Select} from "antd"
import debounce from 'lodash/debounce';

const {Option} = Select

const FC = ({ value, onChange, data, ...restProps }) => {
  const [searchValue, setSearchValue] = useState(undefined)

  const debounceFetcher = useMemo(() => {
    return debounce((value) => {
      setSearchValue(value);
    }, 800);
  }, []);

  const filterData = useMemo(() => {
    if (searchValue) {
        return data?.filter(item => item.includes(searchValue));
    } 
    
    return data||[];
  }, [data, searchValue])  

  const change = (value) => {
    onChange?.(value)
  }

  return (
    <Select 
      style={{width:'100%'}}
      showSearch
      value={value}
      onChange={change}
      allowClear
      filterOption={false}
      onSearch={debounceFetcher}
      {...restProps}
    >
    {
      filterData?.map((item, index)=>{
        return(
          <Option value={item} key={index}>{item}</Option>
        )
      })
    }
    </Select>
  )
}   

export default FC