import React, { useEffect } from "react";
import clsx from "clsx";

import { SupplierProvider } from "../../Contexts/SupplierContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import SupplierTable from "../Table";

const MainForm = () => {
  const classes = useStyles();
  const { setTitle, setSitePath } = useStatusContext();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();

  useEffect(() => {
    setTitle("Suppliers");
    setSitePath([]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <SupplierTable classes={classes} token={token} />
    </div>
  );
};

const SuppliersList = () => (
  <SupplierProvider>
    <MainForm />
  </SupplierProvider>
);

export default SuppliersList;
