import { Grid } from "@material-ui/core";
import clsx from "clsx";
import React, { useEffect } from "react";

import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import { IssueProvider } from "../../Contexts/IssueContext";
import IssueSelectionTable from "../../Controls/IssueSelectionTable";

import SearchField from "../../Controls/SearchField";
import { useLocalStorage } from "../../useLocalStorage";
import useStyles from "../../useStyles";

const MainForm = () => {
  const classes = useStyles();
  const [search, setSearch] = useLocalStorage("ISSUES_SEARCH", "");
  const { setTitle, setSitePath } = useStatusContext();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();

  const handleSearch = (query) => {
    setSearch(query);
  };

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

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Grid container className={classes.root} spacing={2}>
        <Grid item md={4} className={classes.textJustifyAlign}>
        </Grid>
        <Grid item md={2} className={classes.textRightAlign} />
        <Grid item md={4} className={classes.textCenterAlign}>
          <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
        </Grid>
      </Grid>
      <IssueSelectionTable
        classes={classes}
        token={token}
        multiSelect={false}
        search={{ search }}
      />
    </div>
  );
};

const IssuesList = () => (
  <IssueProvider>
    <MainForm />
  </IssueProvider>
);

export default IssuesList;
