import type { AuthEventEmitter } from '@thoughtspot/visual-embed-sdk';
import { AuthType, AuthStatus, init, EmbedEvent, Page } from '@thoughtspot/visual-embed-sdk';
import { AppEmbed } from '@thoughtspot/visual-embed-sdk/lib/src/react';
import classes from './thoughtspot-app.module.css';
import { useGetSdkToken } from '@/api/generated/endpoints/dashboard';
import { useEffect } from 'react';
import { useStore } from '@/store';

interface ThoughtSpotAppProps {
  appType: string;
}

export default function ThoughtSpotApp({ appType }: ThoughtSpotAppProps): JSX.Element {
  const { thoughtSpotSlice } = useStore();
  const { initialized, token, setInitialized, setToken, clearToken  } = thoughtSpotSlice;
  const { mutateAsync: getSdkToken, data, isError, isPending } = useGetSdkToken();
  const username = '230165';

  const tsInitialize = () => {
    const thoughtSpotEventEmitter: AuthEventEmitter = init({
      thoughtSpotHost: import.meta.env.VITE_THOUGHTSPOT_URL,
      authType: AuthType.TrustedAuthTokenCookieless,
      getAuthToken: async () => {
        if (data?.sdkToken && data.sdkToken !== '') {
          return data.sdkToken;
        }
        try{
          await getSdkToken({data: {username}});

          if(!data?.sdkToken || data?.sdkToken === ''){
            return '';
          }

          return data.sdkToken;
        }
        catch (error) {
          return '';
        }
      },
      callPrefetch: true,
      disableTokenVerification: true,
      autoLogin: false,
      username: username,
    });

    thoughtSpotEventEmitter.on(AuthStatus.SUCCESS, () => {
      if(data?.sdkToken){
        setToken(data.sdkToken);
      }
    })
      .on(AuthStatus.SDK_SUCCESS, () => {
        setInitialized(true);
      })
      .on(AuthStatus.FAILURE, (reason) => {
        clearToken();
        // eslint-disable-next-line no-console -- We need to log the EmbedEvent.Load for debugging purposes
        console.error('Failed to authenticate with ThoughtSpot', reason);
      })
      .on(AuthStatus.LOGOUT, () => {
        clearToken();
        setInitialized(false);
      });
  };

  useEffect(() => {
    console.log('TS URL', import.meta.env.VITE_THOUGHTSPOT_URL);
    if(data?.sdkToken && data.sdkToken !== ''){
      setToken(data.sdkToken);
    }
  }, [data, setToken]);

  const onLoad = (): void => {
    // eslint-disable-next-line no-console -- We need to log the EmbedEvent.Load for debugging purposes
    console.log(EmbedEvent.Load, {});
  };

  let pageToLoad = Page.Home;
  if (appType === 'overview') {
    pageToLoad = Page.Home;
  } else if (appType === 'dashboards') {
    pageToLoad = Page.Liveboards;
  } else if (appType === 'answers') {
    pageToLoad = Page.Answers;
  } else if (appType === 'monitor') {
    pageToLoad = Page.Monitor;
  } else if (appType === 'data') {
    pageToLoad = Page.Data;
  }

  if(isPending){
    return <div>Loading...</div>;
  }

  if(isError){
    return <div>Failed to load ThoughtSpot</div>;
  }

  return (
    <div className={classes['thoughtspot-app']}>
      {appType === 'pulse' ? (
        'Pulse'
      ) : (

        <AppEmbed
          frameParams={{
            height: 600,
          }}
          onLoad={onLoad}
          pageId={pageToLoad}
        />
      )}
    </div>
  );
}