twenty/packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts

import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation';
import { getCurrentGraphTypeFromConfig } from '@/command-menu/pages/page-layout/utils/getCurrentGraphTypeFromConfig';
import { isWidgetConfigurationOfTypeGraph } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { t } from '@lingui/core/macro';
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import {
  IconAppWindow,
  IconFrame,
  IconList,
  IconPlus,
  type IconComponent,
} from 'twenty-ui/display';
import { ThemeContext } from 'twenty-ui/theme-constants';
import { useContext } from 'react';

type PageLayoutHeaderInfo = {
  headerIcon: IconComponent | undefined;
  headerIconColor: string;
  headerType: string;
  title: string;
  isReadonly: boolean;
  tab: PageLayoutTab | undefined;
  widgetInEditMode: PageLayoutWidget | undefined;
};

type UsePageLayoutHeaderInfoParams = {
  commandMenuPage: CommandMenuPages;
  draftPageLayout: {
    tabs: PageLayoutTab[];
  };
  pageLayoutEditingWidgetId: string | null | undefined;
  openTabId: string | null | undefined;
  editedTitle: string | null | undefined;
};

export const usePageLayoutHeaderInfo = ({
  commandMenuPage,
  draftPageLayout,
  pageLayoutEditingWidgetId,
  openTabId,
  editedTitle,
}: UsePageLayoutHeaderInfoParams): PageLayoutHeaderInfo | null => {
  const { theme } = useContext(ThemeContext);
  const iconColor = theme.font.color.tertiary;

  switch (commandMenuPage) {
    case CommandMenuPages.PageLayoutTabSettings: {
      if (!isDefined(openTabId)) {
        return null;
      }

      const tab = draftPageLayout.tabs.find((t) => t.id === openTabId);

      if (!isDefined(tab)) {
        return null;
      }

      const title = isDefined(editedTitle)
        ? editedTitle
        : isDefined(tab.title) && tab.title !== ''
          ? tab.title
          : '';

      return {
        headerIcon: IconAppWindow,
        headerIconColor: iconColor,
        headerType: t`Tab`,
        title,
        isReadonly: false,
        tab,
        widgetInEditMode: undefined,
      };
    }

    case CommandMenuPages.PageLayoutIframeSettings: {
      if (!isDefined(pageLayoutEditingWidgetId)) {
        return null;
      }

      const widgetInEditMode = draftPageLayout.tabs
        .flatMap((tab) => tab.widgets)
        .find((widget) => widget.id === pageLayoutEditingWidgetId);

      if (!isDefined(widgetInEditMode)) {
        return null;
      }

      const title = isDefined(editedTitle)
        ? editedTitle
        : isDefined(widgetInEditMode.title) && widgetInEditMode.title !== ''
          ? widgetInEditMode.title
          : '';

      return {
        headerIcon: IconFrame,
        headerIconColor: iconColor,
        headerType: t`iFrame Widget`,
        title,
        isReadonly: false,
        tab: undefined,
        widgetInEditMode,
      };
    }

    case CommandMenuPages.PageLayoutGraphTypeSelect:
    case CommandMenuPages.PageLayoutGraphFilter: {
      if (!isDefined(pageLayoutEditingWidgetId)) {
        return null;
      }

      const widgetInEditMode = draftPageLayout.tabs
        .flatMap((tab) => tab.widgets)
        .find((widget) => widget.id === pageLayoutEditingWidgetId);

      if (!isDefined(widgetInEditMode)) {
        return null;
      }

      if (!isWidgetConfigurationOfTypeGraph(widgetInEditMode.configuration)) {
        return null;
      }

      const currentGraphType = getCurrentGraphTypeFromConfig(
        widgetInEditMode.configuration,
      );
      const graphTypeInfo = GRAPH_TYPE_INFORMATION[currentGraphType];
      const graphTypeLabel = t(graphTypeInfo.label);

      const headerType =
        commandMenuPage === CommandMenuPages.PageLayoutGraphFilter
          ? graphTypeLabel
          : t`Chart`;

      const title = isDefined(editedTitle)
        ? editedTitle
        : isDefined(widgetInEditMode.title) && widgetInEditMode.title !== ''
          ? widgetInEditMode.title
          : '';

      return {
        headerIcon: graphTypeInfo.icon,
        headerIconColor: iconColor,
        headerType,
        title,
        isReadonly: commandMenuPage === CommandMenuPages.PageLayoutGraphFilter,
        tab: undefined,
        widgetInEditMode,
      };
    }

    case CommandMenuPages.PageLayoutFieldsSettings:
    case CommandMenuPages.PageLayoutFieldsLayout: {
      if (!isDefined(pageLayoutEditingWidgetId)) {
        return null;
      }

      const widgetInEditMode = draftPageLayout.tabs
        .flatMap((tab) => tab.widgets)
        .find((widget) => widget.id === pageLayoutEditingWidgetId);

      if (!isDefined(widgetInEditMode)) {
        return null;
      }

      const title = isDefined(editedTitle)
        ? editedTitle
        : isDefined(widgetInEditMode.title) && widgetInEditMode.title !== ''
          ? widgetInEditMode.title
          : '';

      return {
        headerIcon: IconList,
        headerIconColor: iconColor,
        headerType: t`Fields Widget`,
        title,
        isReadonly: false,
        tab: undefined,
        widgetInEditMode,
      };
    }

    case CommandMenuPages.PageLayoutWidgetTypeSelect: {
      return {
        headerIcon: IconPlus,
        headerIconColor: iconColor,
        headerType: '',
        title: t`New widget`,
        isReadonly: true,
        tab: undefined,
        widgetInEditMode: undefined,
      };
    }
    default:
      return null;
  }
};