searchableTabsComponent.tsx

import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
import { Tabs, Input, Empty } from 'antd';
import ParentProvider from '@/providers/parentProvider';
import ComponentsContainer from '@/components/formDesigner/containers/componentsContainer';
import { useStyles } from './style';
import { SearchOutlined } from '@ant-design/icons';
import { filterDynamicComponents } from './utils';
import { IPropertiesTabsComponentProps } from './models';
import { useFormStateOrUndefined, useFormActionsOrUndefined } from '@/providers/form';
import { useShaFormDataUpdate } from '@/providers/form/providers/shaFormProvider';
import { useFormDesignerActiveSettingsTabKey, useFormDesigner } from '@/providers/formDesigner';

interface SearchableTabsProps {
  model: IPropertiesTabsComponentProps;
}

const SearchableTabs: React.FC<SearchableTabsProps> = ({ model }) => {
  const { tabs } = model;
  const [searchQuery, setSearchQuery] = useState('');
  const searchRefs = useRef(new Map());
  const { styles } = useStyles();

  const formState = useFormStateOrUndefined();
  const formActions = useFormActionsOrUndefined();
  const formDesigner = useFormDesigner();
  const persistedActiveTabKey = useFormDesignerActiveSettingsTabKey();

  // Use persisted tab key if available, otherwise default to first tab
  const activeTabKey = persistedActiveTabKey ?? '1';

  useShaFormDataUpdate();

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setSearchQuery(e.target.value);
  };

  const renderSearchInput = (options?: {
    ref?: (el: any) => void;
    className?: string;
    style?: React.CSSProperties;
    autoFocus?: boolean;
    wrapperStyle?: React.CSSProperties;
  }): React.JSX.Element => {
    const input = (
      <Input
        type="search"
        size="small"
        allowClear
        placeholder="Search properties"
        value={searchQuery}
        onChange={handleSearchChange}
        suffix={<SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />}
        ref={options?.ref}
        className={options?.className}
        style={options?.style}
        autoFocus={options?.autoFocus}
      />
    );

    return options?.wrapperStyle ? (
      <div className={styles.searchField} style={options.wrapperStyle}>
        {input}
      </div>
    ) : input;
  };

  const focusActiveTabSearch = useCallback(() => {
    const activeSearchInput = searchRefs.current.get(activeTabKey);
    if (activeSearchInput) {
      // Small delay to ensure the tab is rendered
      setTimeout(() => {
        activeSearchInput.focus();
      }, 50);
    }
  }, [activeTabKey]);

  const handleTabChange = (newActiveKey: string): void => {
    formDesigner.setActiveSettingsTabKey(newActiveKey);
  };

  // Focus search input when search query changes and we have matching results
  useEffect(() => {
    if (searchQuery) {
      focusActiveTabSearch();
    }
  }, [searchQuery, focusActiveTabSearch]);

  // Focus search input when tab changes
  useEffect(() => {
    focusActiveTabSearch();
  }, [activeTabKey, focusActiveTabSearch]);

  const isComponentHidden = (component): boolean => {
    if (formState.name === "modalSettings") {
      if (component.inputs) {
        const visibleInputs = component.inputs.filter((input) => {
          if (!input.propertyName) return true;
          return formActions.isComponentFiltered(input);
        });

        if (visibleInputs.length === 0) {
          return false;
        }

        component.inputs = visibleInputs;

        return visibleInputs.length > 0;
      }

      return formActions.isComponentFiltered(component);
    } else {
      return true;
    }
  };

  const newFilteredTabs = useMemo(() => (tabs
    .map((tab: any, index: number) => {
      const filteredComponents = tab.children ?? filterDynamicComponents(tab.components, searchQuery);

      const visibleComponents = Array.isArray(filteredComponents)
        ? filteredComponents.filter((comp) => isComponentHidden(comp))
        : filteredComponents;

      const hasVisibleComponents = Array.isArray(visibleComponents)
        ? visibleComponents.length > 0
        : !!visibleComponents;

      const tabKey = tab.key || (index + 1).toString();

      return {
        ...tab,
        key: tabKey,
        label: tab.label ?? tab.title,
        components: visibleComponents,
        children: visibleComponents.length === 0
          ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="Properties not found" />
          : (
            <ParentProvider
              name={`SearchableTab-${tabKey}`}
              model={model}
            >
              {renderSearchInput({
                ref: (el) => {
                  if (el) {
                    searchRefs.current.set(tabKey, el);
                  } else {
                    searchRefs.current.delete(tabKey);
                  }
                },
                className: styles.searchField,
              })}
              <ComponentsContainer
                containerId={tab.id + tab.key}
                dynamicComponents={visibleComponents}
              />
            </ParentProvider>
          ),
        forceRender: true,
        hidden: tab.hidden || !hasVisibleComponents,
      };
    })
    .filter((tab) => !tab.hidden)
  ), [model, searchQuery, tabs]);

  // Auto-switch to the first tab that has visible components when searching
  useEffect(() => {
    if (searchQuery && newFilteredTabs.length > 0) {
      const firstVisibleTab = newFilteredTabs.find((tab) =>
        Array.isArray(tab.components) ? tab.components.length > 0 : !!tab.components,
      );
      if (firstVisibleTab && firstVisibleTab.key !== activeTabKey) {
        formDesigner.setActiveSettingsTabKey(firstVisibleTab.key);
      }
    }
  }, [searchQuery, newFilteredTabs, activeTabKey, formDesigner]);

  // Ensure we have a valid active tab key
  useEffect(() => {
    if (newFilteredTabs.length > 0 && !newFilteredTabs.find((tab) => tab.key === activeTabKey)) {
      formDesigner.setActiveSettingsTabKey(newFilteredTabs[0].key);
    }
  }, [newFilteredTabs, activeTabKey, formDesigner]);

  const localTabs = useMemo(() => (
    <Tabs
      key="searchable-tabs"
      activeKey={activeTabKey}
      onChange={handleTabChange}
      size={model.size}
      type={model.tabType || 'card'}
      tabPosition={model.position || 'top'}
      items={newFilteredTabs}
      className={styles.content}
    />
  ), [activeTabKey, handleTabChange, model.size, model.tabType, newFilteredTabs, styles.content, model.position]);

  return (
    <>
      {newFilteredTabs.length === 0 &&
        renderSearchInput({
          autoFocus: true,
        })}
      {newFilteredTabs.length === 0 && searchQuery
        ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="Property Not Found" />
        : localTabs}
    </>
  );
};

export default SearchableTabs;