import { ComponentPropsWithoutRef, ComponentRef, forwardRef, useState } from 'react';
import { css } from '@emotion/css';
import { HomePageSearchBarMode, HomepageModule } from '@thoughtspot/visual-embed-sdk';
import {
  AppEmbed as ThoughtSpotAppEmbed,
  type MessagePayload,
  DataPanelCustomColumnGroupsAccordionState,
} from '@thoughtspot/visual-embed-sdk/react';

type AppEmbedProps = ComponentPropsWithoutRef<typeof ThoughtSpotAppEmbed>;
type AppEmbedRef = ComponentRef<typeof ThoughtSpotAppEmbed>;

export const AppEmbed = forwardRef<AppEmbedRef, AppEmbedProps>(
  ({ pageId, path, visibleActions, onRouteChange, hiddenListColumns }, ref) => {
    const [embedError, setEmbedError] = useState<string | null>(null);
    if (embedError) {
      throw new Error(embedError);
    }

    const handleError = (error: MessagePayload) => {
      // https://developers.thoughtspot.com/docs/events-app-integration#errorType
      // Handle API errors. Other error types are not blocking so we don't need to handle them.
      if (error.data.errorType === 'API' && Array.isArray(error.data.error)) {
        setEmbedError(error.data.error[0].message);
      }
    };

    const fixedProps: AppEmbedProps = {
      className: css({
        flex: 1,
      }),
      disableRedirectionLinksInNewTab: true,
      enableCustomColumnGroups: true,
      dataPanelV2: true,
      dataPanelCustomGroupsAccordionInitialState: DataPanelCustomColumnGroupsAccordionState.COLLAPSE_ALL,
      // Homepage related props
      modularHomeExperience: true,
      homePageSearchBarMode: HomePageSearchBarMode.AI_ANSWER,
      showPrimaryNavbar: false,
      hiddenHomepageModules: [
        HomepageModule.Learning,
        HomepageModule.Trending,
        HomepageModule.MyLibrary,
        HomepageModule.Watchlist,
      ],
      reorderedHomepageModules: [HomepageModule.Search],
      isUnifiedSearchExperienceEnabled: false,
    };

    const dynamicProps: AppEmbedProps = {
      pageId,
      path,
      hiddenListColumns,
      visibleActions,
      onRouteChange,
      onError: handleError,
      onLoad: (data: MessagePayload) => {
        console.log('onLoad', data);
      },
    };

    return <ThoughtSpotAppEmbed ref={ref} {...fixedProps} {...dynamicProps} />;
  }
);

AppEmbed.displayName = 'AppEmbed';