import React, { useState } from "react";
import PropType from "prop-types";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import filterIcon from "../../assets/images/filter_vector.png";
import x from "../../assets/images/x.png";
import { changeStatusIsCheckedValue } from "../../store/actions/processes/statusAction";
import { useDispatch } from "react-redux";
import { setFilteredProcessesReq  } from "../../store/actions/processes/processesAction";
import { useTranslation } from "react-i18next";

const SelectionFilter = ({ open, handleClose, statuses }) => {
  const [startAt, setStartAt] = useState("");
  const [endAt, setEndAt] = useState("");
  const { t } = useTranslation();

  const dispatch = useDispatch();

  const onSubmitFilters = () => {
    const status = statuses
      .filter((status) => status.isChecked === true)
      .map((status) => status.name);

    if (status.length === 0) {
      return;
    }

    dispatch(
      setFilteredProcessesReq({
        statuses: status,
        startAt,
        endAt
      })
    );

    handleClose();
  };

  const handleCheckboxes = (e) => {
    const { value } = e.target;
    dispatch(changeStatusIsCheckedValue(value));
  };

  const list = () => (
    <Box
      sx={{
        width: 360,
        height: "100%",
        borderRadius: "18px 0 0 18px",
        padding: "36px",
      }}
      role="presentation"
      // onClick={handleClose}
      onKeyDown={handleClose}
    >
      <div>
        <div className="ad-filters-header-container">
          <div className="ad-filters-header">
            <img src={filterIcon} alt="filter_icon" />
            <h3>{t("filter.title")}</h3>
            <p>
              <sub>| {t("selection.title")}</sub>
            </p>
          </div>
          <div className="ad-filters-header-close" onClick={handleClose}>
            <img src={x} alt="x" />
          </div>
        </div>
        <div className="ad-filters-technologies">
          <div className="ad-filters-sub-title">
            <p>{t("selection.filterStatus")}</p>
          </div>
          <div className="ad-filters-technologies-checkboxes">
            <FormGroup>
              {statuses?.map((technology, index) => (
                <FormControlLabel
                  key={index}
                  control={
                    <Checkbox
                      onChange={handleCheckboxes}
                      value={technology.name}
                      checked={technology.isChecked}
                    />
                  }
                  label={technology.name}
                />
              ))}
            </FormGroup>
          </div>
        </div>
        <div className="ad-filters-technologies">
          {/* <div className="ad-filters-sub-title">
            <p>Datum isteka oglasa</p>
          </div>
          <input
            type="date"
            placeholder="ex"
            value={expiredAt}
            onChange={(e) => setExpiredAt(e.target.value)}
          /> */}
          <div className="ad-filters-sub-title">
            <p>{t("selection.filterDate")}</p>
          </div>
          <div className="add-ad-modal-stage-sub-card">
            <label>{t("selection.filterFrom")}</label>
            <input
              type="date"
              placeholder="ex"
              value={startAt}
              onChange={(e) => setStartAt(e.target.value)}
            />
          </div>
          <div className="add-ad-modal-stage-sub-card">
            <label>{t("selection.filterTo")}</label>
            <input
              type="date"
              placeholder="ex"
              value={endAt}
              onChange={(e) => setEndAt(e.target.value)}
            />
          </div>
        </div>
        <div className="ad-filters-search">
          <button onClick={onSubmitFilters} className="c-btn c-btn--primary">
          {t("selection.filterSubmit")}
          </button>
        </div>
      </div>
    </Box >
  );

  return (
    <div>
      <Drawer anchor="right" open={open} onClose={handleClose}>
        {list()}
      </Drawer>
    </div>
  );
};

SelectionFilter.propTypes = {
  open: PropType.any,
  handleClose: PropType.func,
  statuses: PropType.any,
};

export default SelectionFilter;
