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 CarUpdatesTable from "../../Controls/CarUpdatesTable";
import CarVersionLogTable from "../../Controls/CarVersionLogTable";
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">Car Updates</Typography>
      <CarUpdatesTable vin={vin} token={token} classes={classes} />
      <Typography variant="h6" className={classes.labelInline}>Version Log</Typography>
      <CarVersionLogTable vin={vin} token={token} classes={classes} />
    </div>
  );
};

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

export default CarUpdatesTab;