import React, { useState, useEffect } from "react";
import { useSelector} from 'react-redux';
import Selection from "../../components/Selection/Selection";
import FilterButton from "../../components/Button/FilterButton";
import { useTranslation } from "react-i18next";
import AddAdModal from "../../components/Ads/AddAdModal";
import { useDispatch } from "react-redux";
import { setDoneProcess } from "../../store/actions/processes/processAction";
import { setProcessesReq } from "../../store/actions/processes/processesAction";
import { setStatuses } from "../../store/actions/processes/statusAction";
import { selectDoneProcess } from "../../store/selectors/processSelectors";
import { selectProcesses } from "../../store/selectors/processesSelectors"
import { selecStatuses } from "../../store/selectors/statusSelectors"
import PropTypes from "prop-types";
import SelectionFilter from "../../components/Selection/SelectionFilter"

const SelectionProcessPage = ({history}) => {
  const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
  const [toggleModal, setToggleModal] = useState(false);
  // const errorMessage = useSelector(selectProcessesError);
  const process = useSelector(selectDoneProcess);
  const processes = useSelector(selectProcesses);
  // const doneErrorMessage = useSelector(selectDoneProcessError);
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const statuses = useSelector(selecStatuses);

  
  
  useEffect(() => {
    dispatch(setProcessesReq());
    const s = [
      {"isChecked":false,"name":"Zakazan"},
      {"isChecked":false,"name":"Odrađen"},
      {"isChecked":false,"name":"Čeka na zakazivanje"},
      {"isChecked":false,"name":"Čeka se odgovor"}]
      dispatch(setStatuses(s));
      
  }, []);


  useEffect(() => {
    dispatch(setProcessesReq());
    dispatch(setDoneProcess(false));
  },[process.process.doneProcess])

  const handleToggleFiltersDrawer = () => {
    setToggleFiltersDrawer((oldState) => !oldState);
  };

  const handleToggleModal = () => {
    setToggleModal((oldState) => !oldState);
  };

  
  const renderList = processes.map((item, index) => {
    return <Selection selection={item} key={index} history={history}/>
}
);

  return (
    <>
      <div className="l-t-rectangle"></div>
      <div className="r-b-rectangle"></div>
      <SelectionFilter />
      <SelectionFilter
        open={toggleFiltersDrawer}
        handleClose={handleToggleFiltersDrawer}
        statuses={statuses}
      />
      <AddAdModal open={toggleModal} handleClose={handleToggleModal} />
      <div className="selections">
        <div className="selection-levels">
          <div className="level-header">
            <h1>{t("selection.title")}
            <span className="level-header-spliter">
              |
              </span>
              <span className="level-header-subheader">
              {t("selection.subtitle")} 
                </span>
                </h1>
            <FilterButton onShowFilters={handleToggleFiltersDrawer} />
          </div>
          <div>
            {/* <IconButton
              sx={{ marginLeft: "15px" }}
              className="c-btn c-btn--primary-outlined fixed-right"
              onClick={handleToggleFiltersDrawer}
            >
              Filteri{" "}
              <img src={filterVector} alt="filter" className="filter-vector" />
            </IconButton> */}
          <div className="selection-levels-processes">
            <div className="selection-levels-processes-process">
              {renderList}
            </div>
          </div>
          </div>
        </div>
      </div>
    </>
  );
};

SelectionProcessPage.propTypes = {
  history: PropTypes.shape({
      replace: PropTypes.func,
      push: PropTypes.func,
      location: PropTypes.shape({
          pathname: PropTypes.string,
      }),
  }),
};

export default SelectionProcessPage;
