import React, { useEffect } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from "@material-ui/core";

import {
  CANSignalProvider,
  useCANSignalContext,
} from "../../Contexts/CANSignalsContext";

const Main = ({ vin }) => {
  const { signals, setVIN } = useCANSignalContext();

  useEffect(() => {
    setVIN(vin);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [vin]);

  if (!signals || signals.length === 0) return <h3>Loading...</h3>;

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>Timestamp</TableCell>
          <TableCell>Signal</TableCell>
          <TableCell>Value</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {signals.map((signal, i) => (
          <TableRow key={i}>
            <TableCell>{signal.timestamp}</TableCell>
            <TableCell>{signal.signal}</TableCell>
            <TableCell>{signal.value}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

const CANSignals = (props) => (
  <CANSignalProvider {...{token:props.token}}>
    <Main {...props} />
  </CANSignalProvider>
);

export default CANSignals;