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

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

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

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Typography variant="h6" style={{ paddingBottom: "10px" }}>
        CAN Signals
      </Typography>
      <CANSignals vin={vin} token={token} />
    </div>
  );
};

const CANSignalsTab = (props) => (
  <VehicleProvider>
    <Main {...props} />
  </VehicleProvider>
);

export default CANSignalsTab;