import React, { useEffect } from "react";
import { Button, Grid, Link } from "@material-ui/core";
import CreateIcon from "@material-ui/icons/Create";

import { useStatusContext } from "../Contexts/StatusContext";
import useStyles from "../useStyles";
import ResponsiveIFrame from "../Controls/ResponsiveIFrame";

const Dashboard = () => {
  const classes = useStyles();
  const { setTitle } = useStatusContext();

  useEffect(() => {
    setTitle("Dashboard");
    // eslint-disable-next-line
  }, []);

  return (
    <div className={classes.paper}>
      <Grid container className={classes.root} spacing={2}>
        <Grid item md={6}>
          <ResponsiveIFrame
            classes={classes}
            src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=6"
            title="Vehicle Connected"
          />
        </Grid>
        <Grid item md={6}>
          <ResponsiveIFrame
            classes={classes}
            src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&from=1623869272751&to=1623880072751&panelId=12"
            title="Signals Time Series"
          />
        </Grid>
      </Grid>
      <Grid container className={classes.root} spacing={2}>
        <Grid item md={6}>
          <ResponsiveIFrame
            classes={classes}
            src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&from=1623869351185&to=1623880151186&panelId=14"
            title="Total Signals"
          />
        </Grid>
        <Grid item md={6}>
          <ResponsiveIFrame
            classes={classes}
            src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=2"
            title="Vehicle Signals"
          />
        </Grid>
      </Grid>
      <Button
        style={{ marginTop: 10 }}
        aria-label="create"
        color="primary"
        component={Link}
        href="https://grafana.fiskerdps.com"
        rel="noopener"
        target="_blank"
      >
        <CreateIcon fontSize="large" />
        Create Charts
      </Button>
    </div>
  );
};

export default Dashboard;