import clsx from "clsx";
import React, { useEffect } from "react";
import { useParams } from "react-router";

import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import IssueDetailsTab from "./DetailsTab";

const IssueInfo = () => {
  const { id } = useParams();
  const classes = useStyles();
  const { setTitle, setSitePath } = useStatusContext();

  useEffect(() => {
    const title = `Issue ${id} Details`;
    setTitle(title);
    setSitePath([
      {
        label: "Issues",
        link: "/issues",
      },
      {
        label: title,
      },
    ]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);

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

};

export default IssueInfo;
