import useStyles from "../../useStyles";
import clsx from "clsx";
import Typography from "@material-ui/core/Typography";
import SendDiagnosticCommand from "../../Controls/SendDiagnosticCommand";
import { useParams } from "react-router";

import { useUserContext } from "../../Contexts/UserContext";

import {VehicleProvider} from "../../Contexts/VehicleContext";

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

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Typography variant="h6">Vehicle Diagnostic Commands</Typography>
      <VehicleProvider>
        <SendDiagnosticCommand vin={vin} token={token} classes={classes}></SendDiagnosticCommand>
      </VehicleProvider>
    </div>
  )
}

export default RemoteDiagnosticCommandsTab
