import { Typography } from "@material-ui/core";
import clsx from "clsx";
import React from "react";
import { useParams } from "react-router";

import { useUserContext } from "../../Contexts/UserContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import TRexLogsTable from "../../Controls/TRexLogs";
import useStyles from "../../useStyles";

const MainForm = () => {
  const { vin } = useParams();
  const classes = useStyles();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Typography variant="h6">
        T.Rex Logs
      </Typography>
      <TRexLogsTable vin={vin} token={token} classes={classes} />
    </div>
  );
};

const TRexLogsTab = () => (
  <VehicleProvider>
    <MainForm />
  </VehicleProvider>
);

export default TRexLogsTab;