import {FilterButtonGroup, FilterField} from '@components';
import {Card, Row} from 'antd';
import {FC} from 'react';
import {useField, useHandle} from './hooks';
import {useTableSearch} from '@hooks';
import {searchContext} from '../context';

const Filter: FC = function() {
  const [value, onChange] = useField();
  const {onSearch} = useHandle(value);
  const [isSearching] = useTableSearch(searchContext);

  return (
    <Card>
      <Row>
        <FilterField name='menuName' label='菜单名称' value={value} onChange={onChange} />
        <FilterButtonGroup onSearch={onSearch} offset={12} isSearching={isSearching} />
      </Row>
    </Card>
  );
};

export default Filter;
