import { embedDashboard } from "@superset-ui/embedded-sdk";
import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import api from "../../services/superset";
import { useStatusContext } from "../Contexts/StatusContext";
import { useUserContext } from "../Contexts/UserContext";
import './index.css';


const Dashboard = () => {
  const { setTitle, setSitePath } = useStatusContext();
  const history = useHistory()

  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();

  useEffect(() => {
    const urlsplit = window.location.href.split("/")
    const id = urlsplit[urlsplit.length - 1]
    setTitle("Datascope");
    setSitePath([]);
    embedDashboard({
      id: id, // given by the Superset embedding UI
      supersetDomain: api.SupersetDashboardURL(),
      mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
      fetchGuestToken: () => api.getGuestToken(token),
      dashboardUiConfig: { hideTab: true, hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
    });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [history.location]);

  return (
    <div style={{
      display: 'flex',
      height: '85vh'
    }} id="my-superset-container">
    </div>
  );
};

//style={{position:'absolute', top:0, left:0, bottom:0, right:0, width:'100%', height:'100%', border:'none', margin:0, padding:0, overflow:'hidden'}}
export default Dashboard;