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

import { logger } from "../../../services/monitoring";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import {
  useVehicleContext,
  VehicleProvider
} from "../../Contexts/VehicleContext";
import DigitalTwin from "../../DigitalTwin";
import useStyles from "../../useStyles";

const REQUEST_INTERVAL = 10000;

const Main = (props) => {
  const { getState } = useVehicleContext();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();
  const { setMessage } = useStatusContext();
  const classes = useStyles();
  const [carState, setCarState] = useState(null);
  const { vin } = props;

  useEffect(() => {
    if (!vin) return;
    getCarState();
    const interval = setInterval(getCarState, REQUEST_INTERVAL);
    return () => { clearInterval(interval); }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [vin]);

  const getCarState = async () => {
    try {
      const result = await getState(token, vin);
      setCarState(result.data);
    } catch (e) {
      setMessage(e.message);
      logger.warn(e.stack);
    }
  };

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Typography variant="h6" style={{ paddingBottom: "10px" }}>
        Digital Twin
      </Typography>
      {carState && (
        <>
          <div>
            <b>Connected</b>: {carState.online.toString()}
          </div>
          <div>
            <b>ICC Connected</b>: {carState?.online_hmi.toString()}
          </div>
          <DigitalTwin {...carState} />
        </>
      )}
    </div>
  );
};

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

export default DigitalTwinTab;