import { Formik } from 'formik';
import { useKhovtMasterNguonGocControllerFind } from 'main/apis/drc/endpoints/khovt-master-nguon-goc-controller/khovt-master-nguon-goc-controller';
import { useKhovtNhomControllerFind } from 'main/apis/drc/endpoints/khovt-nhom-controller/khovt-nhom-controller';
import { Select2Box } from 'main/components/molecules/selectbox';
import { ChangeEvent, useMemo } from 'react';
import { Button, Col, Form, FormGroup, Input, Label, Row } from 'reactstrap';

export type SuppliesFilter = {
  suppliesGroup: string;
  batch: string;
  suppliesCode: string;
};

enum FieldName {
  SUPPLIES_GROUP = 'suppliesGroup',
  BATCH = 'batch',
  SUPPLIES_CODE = 'suppliesCode',
}

type Props = {
  filter: SuppliesFilter;
  handleSearchClick: (newFilter: SuppliesFilter) => void;
};

function AddSuppliesModalFilter({ filter, handleSearchClick }: Props) {
  // React Query
  const { data: suppliesGroups } = useKhovtNhomControllerFind({
    filter: {
      offset: 0,
      limit: 100,
    },
  });

  const { data: batches } = useKhovtMasterNguonGocControllerFind({
    filter: {
      offset: 0,
      limit: 100,
    },
  });

  // React Function
  const suppliesGroupOptions = useMemo(() => {
    return [
      { id: '-1', text: 'Tất cả' },
      ...(suppliesGroups?.map((group) => ({ id: group.id, text: group.maNhom })) || []),
    ];
  }, [suppliesGroups]);

  const batchOptions = useMemo(() => {
    return [{ id: '-1', text: 'Tất cả' }, ...(batches?.map((batch) => ({ id: batch.id, text: batch.tenNhaSx })) || [])];
  }, [batches]);

  return (
    <Formik
      initialValues={filter}
      enableReinitialize
      onSubmit={() => {
        // do nothing
      }}>
      {({ values, handleChange, setFieldValue }) => (
        <Form>
          <Row>
            <Col md={12} lg={4}>
              <FormGroup className="row">
                <Label className="form-control-label" md="3">
                  Nhóm vật tư
                </Label>
                <Col md="9">
                  <Select2Box
                    className="form-control"
                    options={{
                      placeholder: 'Chọn nhóm vật tư',
                    }}
                    value={values.suppliesGroup}
                    onChange={(e: ChangeEvent<HTMLSelectElement>) =>
                      setFieldValue(FieldName.SUPPLIES_GROUP, e.target.value)
                    }
                    data={suppliesGroupOptions}
                  />
                </Col>
              </FormGroup>
            </Col>
            <Col md={12} lg={4}>
              <FormGroup className="row">
                <Label className="form-control-label" md="3">
                  Mã vật tư
                </Label>
                <Col md="9">
                  <Input
                    className="form-control"
                    options={{ placeholder: 'Nhập mã vật tư' }}
                    name={FieldName.SUPPLIES_CODE}
                    value={values.suppliesCode}
                    onChange={handleChange}
                  />
                </Col>
              </FormGroup>
            </Col>
            <Col md={12} lg={4}>
              <FormGroup className="row">
                <Label className="form-control-label" md="3">
                  Mã lô
                </Label>
                <Col md="9">
                  <Select2Box
                    className="form-control"
                    options={{
                      placeholder: 'Chọn mã lô',
                    }}
                    value={values.batch}
                    onChange={(e: ChangeEvent<HTMLSelectElement>) => setFieldValue(FieldName.BATCH, e.target.value)}
                    data={batchOptions}
                  />
                </Col>
              </FormGroup>
            </Col>
          </Row>
          <div className="d-flex justify-content-end">
            <Button color="primary" onClick={() => handleSearchClick(values)}>
              Tìm
            </Button>
          </div>
        </Form>
      )}
    </Formik>
  );
}

export default AddSuppliesModalFilter;
