/* eslint-disable no-console */
import React, { createContext, FC, useContext, useMemo, useEffect, useState } from 'react';

const SISENSE_CONFIG = {
  server: 'https://the7bridges.sisense.com',
  containerId: 'sisenseApp',
};

const loadSisense = (onLoadFinished: () => void) => {
  const script = document.createElement('script');
  script.src = `${SISENSE_CONFIG.server}/js/sisense.v1.js`;
  script.async = true;
  script.onload = onLoadFinished;
  script.onerror = () => {
    console.error(`[Sisense] - Failed to load sisense script from ${script.src}`);
  };
  document.body.appendChild(script);
};

type Sisense = {
  app: any;
};

type TSisenseContext = {
  sisense?: Sisense;
};

const defaultContext: TSisenseContext = {
  sisense: undefined,
};

const SisenseContext = createContext<TSisenseContext>(defaultContext);

const SisenseProvider: FC = ({ children }) => {
  const [sisense, setSisense] = useState<Sisense | undefined>(undefined);
  useEffect(() => {
    loadSisense(() => {
      console.info('[Sisense] - Sisense script loaded');
      window.Sisense.connect(SISENSE_CONFIG.server, false)
        .then((app: any) => {
          console.info('[Sisense] - Sisense app connected');
          setSisense({ app });
          console.log(app);
        })
        .catch(() => {
          console.error('[Sisense] - Failed to connect to Sisense');
        });
    });
  }, []);

  const value = useMemo<TSisenseContext>(() => ({ sisense }), []);

  return (
    <SisenseContext.Provider value={value}>
      <div id={SISENSE_CONFIG.containerId}>{children}</div>
    </SisenseContext.Provider>
  );
};

const useSisense = () => {
  const context = useContext(SisenseContext);
  if (context === undefined) {
    throw new Error('useSisense must be used within a SisenseProvider');
  }
  return context;
};

export { SisenseProvider, useSisense };