filter

import React from "react";
import moment from "moment";
import InputKendoRct from "../../control-components/input/input";
import DatePickerKendoRct from "../../control-components/date-picker/date-picker";
import { Loader } from "@progress/kendo-react-indicators";
import ApiHelper from "../../helper/api-helper";
import ApiUrls from "../../helper/api-urls";
import { NotificationManager } from "react-notifications";
import "bootstrap/dist/css/bootstrap.min.css";

const FilterModel = ({ filters, updateFilters, page, pageSize, onPageChange, onLogsUpdate }) => {
  const [loading, setLoading] = React.useState(false);
  const [tempFilters, setTempFilters] = React.useState(filters); // Temporary state to hold changes

  const handleChange = (e) => {
    const value = e.target.value;
    const name = e.target.name;

    updateFilters({
      ...filters,
      [name]: name === "staffId" ? (value ? [value] : []) : value,
    });
  };

  const handleFilter = () => {
    setLoading(true);

    const data = {
      pageNumber: page,
      pageSize: pageSize,
      staffId: tempFilters.staffId === null ? [] : tempFilters.staffId,
      clinicId: tempFilters.clinicId,
      startDate: tempFilters.startDate ? moment(tempFilters.startDate).toISOString() : null,
      endDate: tempFilters.endDate ? moment(tempFilters.endDate).toISOString() : null,
    };

    onPageChange({ page: { skip: (page - 1) * pageSize, take: pageSize } });
    ApiHelper.postRequest(ApiUrls.GET_LOGS, data)
      .then((response) => {
        setLoading(false);

        onLogsUpdate(response.resultData, response.metaData);
      })
      .catch((error) => {
        setLoading(false);
        NotificationManager.error(error.message);
      });
      updateFilters(tempFilters);
  };

  const handleClear = React.useCallback(() => {
    setTempFilters({
      staffId: [],
      clinicId: null,
      startDate: moment().subtract(3, "days").startOf("day").toISOString(),
      endDate: moment().endOf("day").toISOString(),
    });
  }, []);

  return (
    <>
      {loading && <Loader />}
      <div className="row align-items-end">
        <div className="col-lg-3 col-md-6 col-12">
          <InputKendoRct
            value={tempFilters.staffId} // Use tempFilters instead of filters
            onChange={handleChange}
            name="staffId"
            label="Staff Id"
            className="form-control"
            placeholder="Staff Id"
            type="number"
          />
        </div>

        <div className="col-lg-3 col-md-6 col-12">
          <InputKendoRct
            value={tempFilters.clinicId} // Use tempFilters instead of filters
            onChange={handleChange}
            name="clinicId"
            label="Client Id"
            className="form-control"
            placeholder="Client Id"
            type="number"
          />
        </div>
        <div className="col-lg-3 col-md-6 col-12 date-field">
          <DatePickerKendoRct
            value={tempFilters.startDate ? new Date(tempFilters.startDate) : new Date()}
            onChange={(e) => setTempFilters({ ...tempFilters, startDate: e.value })}
            label={"Start Date"}
          />
        </div>
        <div className="col-lg-3 col-md-6 col-12 date-field">
          <DatePickerKendoRct
            value={tempFilters.endDate ? new Date(tempFilters.endDate) : new Date()}
            onChange={(e) => setTempFilters({ ...tempFilters, endDate: e.value })}
            label={"End Date"}
          />
        </div>
        <div className="col-lg-6 col-md-6 col-12 pt-3 text-right justify-content-start flex-wrap d-flex align-items-center">
          <button className="green-btn btn-primary" onClick={handleFilter}>
            Filter
          </button>
          <button className="btn ml-3" onClick={handleClear}>
            Clear
          </button>
        </div>
      </div>
    </>
  );
};
export default FilterModel;