import {FilterButtonGroup, FilterDatePicker} from '@components';
import {Card, Row} from 'antd';
import {FC} from 'react';
import {useExport, useSearch} from './hooks';
import {useRangeDate, useTableSearch} from '@hooks';
import {searchContext} from '../context';

const Filter: FC = function() {
  const [dates, setDates] = useRangeDate();
  const onSearch = useSearch(dates);
  const [isSearching] = useTableSearch(searchContext);
  const [isExporting, onExport] = useExport();

  return (
    <Card>
      <Row>
        <FilterDatePicker
          label='日期选择'
          name='containerDate'
          value={dates}
          onChange={setDates}
        />
        <FilterButtonGroup
          offset={12}
          onSearch={onSearch}
          isSearching={isSearching}
          onExport={onExport}
          isExporting={isExporting}
          searchTestId='container_scrap_search'
          exportTestId='container_scrap_export'
        />
      </Row>
    </Card>
  );
};

export default Filter;
