import { Box, Input } from '@tidbcloud/uikit'
import { useDebouncedValue } from '@tidbcloud/uikit/hooks'
import { IconSearchLg } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useEffect, useState } from 'react'

const ResultSearch = ({ onChange, disabled }: { onChange: (filter: string) => void; disabled: boolean }) => {
  const [searchValue, setSearchValue] = useState('')
  const [debouncedSearchText] = useDebouncedValue(searchValue, 300)

  useEffect(() => {
    onChange(debouncedSearchText)
  }, [debouncedSearchText])

  return (
    <>
      <Input
        size="sm"
        mr={8}
        placeholder=""
        rightSection={<Box component={IconSearchLg} size={16} c="carbon.7" />}
        styles={() => ({
          wrapper: {
            height: 28
          },
          input: {
            height: 28,
            lineHeight: '28px',
            minHeight: 28
          }
        })}
        disabled={disabled}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          setSearchValue(e.currentTarget.value)
        }}
      />
    </>
  )
}

export default observer(ResultSearch)