import React from 'react'
import { FilterValue, useAsyncDebounce } from 'react-table'
import Input from '../input'
import SearchIcon from './search-icon'

interface Props {
  globalFilter?: string
  setGlobalFilter: (filterValue: FilterValue) => void
}

const GlobalFilter: React.FC<Props> = ({ globalFilter, setGlobalFilter }) => {
  const [value, setValue] = React.useState(globalFilter)
  const onChange = useAsyncDebounce(setGlobalFilter, 200)
  return (
    <Input
      value={value || ''}
      icon={<SearchIcon color="#454545" height="24px" />}
      onChange={(e) => {
        setValue(e.target.value)
        onChange(e.target.value)
      }}
      placeholder="Search..."
      width="100%"
    />
  )
}

const MemoGlobalFilter = React.memo(GlobalFilter)

export default MemoGlobalFilter