twenty/packages/twenty-front/src/modules/side-panel/hooks/useOpenWidgetSettingsInSidePanel.ts

import { useCallback } from 'react';

import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useIsDashboardPageLayout } from '@/side-panel/pages/page-layout/hooks/useIsDashboardPageLayout';
import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { t } from '@lingui/core/macro';
import { SidePanelPages } from 'twenty-shared/types';
import { WidgetType } from '~/generated-metadata/graphql';

export const useOpenWidgetSettingsInSidePanel = (
  pageLayoutIdFromProps?: string,
) => {
  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
    PageLayoutComponentInstanceContext,
    pageLayoutIdFromProps,
  );

  const isDashboardPageLayout = useIsDashboardPageLayout();

  const setPageLayoutEditingWidgetId = useSetAtomComponentState(
    pageLayoutEditingWidgetIdComponentState,
    pageLayoutId,
  );

  const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
  const { closeSidePanelMenu } = useSidePanelMenu();
  const setSidePanelPage = useSetAtomState(sidePanelPageState);

  const openWidgetSettingsInSidePanel = useCallback(
    ({
      widgetId,
      widgetType,
    }: {
      widgetId: string;
      widgetType: WidgetType;
    }) => {
      if (widgetType === WidgetType.IFRAME) {
        if (!isDashboardPageLayout) {
          return;
        }

        navigatePageLayoutSidePanel({
          sidePanelPage: SidePanelPages.DashboardIframeSettings,
          pageTitle: t`Edit iFrame`,
          resetNavigationStack: true,
        });
        setPageLayoutEditingWidgetId(widgetId);
        return;
      }

      if (widgetType === WidgetType.GRAPH) {
        if (!isDashboardPageLayout) {
          return;
        }

        navigatePageLayoutSidePanel({
          sidePanelPage: SidePanelPages.DashboardChartSettings,
          pageTitle: t`Edit Graph`,
          resetNavigationStack: true,
        });
        setPageLayoutEditingWidgetId(widgetId);
        return;
      }

      if (widgetType === WidgetType.FIELDS) {
        if (!isDashboardPageLayout) {
          navigatePageLayoutSidePanel({
            sidePanelPage: SidePanelPages.RecordPageFieldsSettings,
            pageTitle: t`Edit Fields`,
            resetNavigationStack: true,
          });
          setPageLayoutEditingWidgetId(widgetId);
        }
        return;
      }

      if (widgetType === WidgetType.FIELD) {
        if (!isDashboardPageLayout) {
          navigatePageLayoutSidePanel({
            sidePanelPage: SidePanelPages.RecordPageFieldSettings,
            pageTitle: t`Field widget`,
            resetNavigationStack: true,
          });
          setPageLayoutEditingWidgetId(widgetId);
        }
        return;
      }

      if (widgetType === WidgetType.RECORD_TABLE) {
        if (!isDashboardPageLayout) {
          return;
        }

        navigatePageLayoutSidePanel({
          sidePanelPage: SidePanelPages.DashboardRecordTableSettings,
          pageTitle: t`Edit Record Table`,
          resetNavigationStack: true,
        });
        setPageLayoutEditingWidgetId(widgetId);
        return;
      }

      if (widgetType === WidgetType.STANDALONE_RICH_TEXT) {
        setPageLayoutEditingWidgetId(widgetId);
        closeSidePanelMenu();
        return;
      }

      setSidePanelPage(SidePanelPages.CommandMenuDisplay);
      closeSidePanelMenu();
    },
    [
      isDashboardPageLayout,
      setPageLayoutEditingWidgetId,
      navigatePageLayoutSidePanel,
      closeSidePanelMenu,
      setSidePanelPage,
    ],
  );

  return {
    openWidgetSettingsInSidePanel,
  };
};