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

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

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

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Typography variant="h6" className={classes.labelInline}>
        Car ECUs
      </Typography>
      <CarECUsTable vin={vin} token={token} classes={classes} />
    </div>
  );
};

const CarUpdatesTab = ({vin}) => (
  <VehicleProvider>
    <MainForm vin={vin}/>
  </VehicleProvider>
);

export default CarUpdatesTab;