import DataTableSupplies from "../components/DataTableSupplies";
import { useDispatch, useSelector } from "react-redux";
import ButtonAdd from "../components/ButtonAdd";
import ButtonArchived from "../components/ButtonArchived";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";

import { useEffect } from "react";
import { getSuppliesThunk } from "../reducers/supplies";
import { Link } from "react-router-dom";

export default function Supplies() {
  const components = useSelector((state) => state.components);
  const supplies = useSelector((state) => state.suppliesThunk);

  const dispatch = useDispatch();

  const fetchSupplies = async () => {
    await dispatch(getSuppliesThunk());
  };

  useEffect(() => {
    fetchSupplies();
  }, []);

  //console.log("supplies desde SuppliesView");
  //console.log(supplies);

  return (
    <div className="container-body">
      <div className="container-body-paper">
        <div className="wrapper-header">
          <Link style={{cursor: 'default'}}>
            <div className="header-title text-hover">INSUMOS</div>
          </Link>
          <ButtonArchived
            router={"/archivedsupplies"}
            title={"ARCHIVADOS"}
            icon={"down"}
          />
          <ButtonAdd router={"/newsupply"} />
        </div>
        <DataTableSupplies suppliesThunk={supplies} />
      </div>
    </div>
  );
}