import { Select2Box } from 'main/components/molecules/selectbox';
import { ChangeEvent, useMemo } from 'react';
import ReactDatetime from 'react-datetime';
import { Button, Col, Form, FormGroup, Input, Label, Row } from 'reactstrap';
import DatePickerHelper from './date-picker-helper';

function SuppliesStoreManagerfilter() {
  return (
    <Form>
      <Row>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Chọn kho nhập
            </Label>
            <Col md="9">
              <Select2Box className="form-control" options={{ placeholder: 'Tất cả' }} />
            </Col>
          </FormGroup>
        </Col>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Đơn vị nhập
            </Label>
            <Col md="9">
              <Select2Box className="form-control" options={{ placeholder: 'Chọn kho nhập' }} />
            </Col>
          </FormGroup>
        </Col>
      </Row>
      <hr />
      <div>Kì báo cáo</div>
      <Row>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Từ ngày
            </Label>
            <Col md="9">
              <ReactDatetime inputProps={{ placeholder: 'Chọn ngày' }} timeFormat={false} />
            </Col>
          </FormGroup>
        </Col>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Đến ngày
            </Label>
            <Col md="9">
              <ReactDatetime inputProps={{ placeholder: 'Chọn ngày' }} timeFormat={false} />
            </Col>
          </FormGroup>
        </Col>
      </Row>
      <Row>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Col md="3">
              <Select2Box className="form-control" options={{ placeholder: 'Tiêu chí tìm kiếm' }} />
            </Col>
            <Col md="9">
              <Input type="text" placeholder="Nhập từ khoá cần tìm..." />
            </Col>
          </FormGroup>
        </Col>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Trạng thái lô hàng
            </Label>
            <Col md="9">
              <Select2Box className="form-control" options={{ placeholder: 'Tất cả' }} />
            </Col>
          </FormGroup>
        </Col>
      </Row>
      <div className="d-flex justify-content-end mb-4 pb-1">
        <Button className="btn-neutral">Xem sổ theo dõi chứng từ nhập về</Button>
        <Button color="primary">Tìm kiếm</Button>
      </div>
    </Form>
  );
}

export default SuppliesStoreManagerfilter;
