import {FilterButtonGroup, FilterField} from '@components';
import {Card, Row} from 'antd';
import {FC} from 'react';
import {useSearch, useField, useExport} from './hooks';
import {useContextSelector} from 'use-context-selector';
import {context} from '../context';

const Filter: FC = function() {
  const [{name, code}, onChange] = useField();
  const onSearch = useSearch(name, code);
  const [isExporting, onExport] = useExport();
  const isSearching = useContextSelector(context, state => state[0].isSearching);

  return (
    <Card>
      <Row>
        <FilterField name='useName' label='用户名称' value={name} onChange={onChange('name')} />
        <FilterField name='useCode' label='用户编号' value={code} onChange={onChange('code')} />
        <FilterButtonGroup
          onSearch={onSearch}
          onExport={onExport}
          offset={6}
          isExporting={isExporting}
          isSearching={isSearching}
        />
      </Row>
    </Card>
  );
};

export default Filter;
