import { searchConfigGroup as e } from "../constants/index.js";
import { P as t } from "../../../../packageName-CJwD6mUt.js";
import n from "../utils/stringifyCommandGroup.js";
const s = `import { 
  Box, 
  Text, 
  Command, 
  CommandGroup, 
  CommandItem, 
  CommandVariant, 
  SearchConfigHandler 
} from '${t}';
import React, { useCallback, useMemo, useState } from 'react';
import { searchConfigGroup } from '../constants';
import { useArticleQuery } from './hooks';

interface IAdvancedCommandProps {}

const searchConfigGroup: CommandGroup[] = ${n(e)};

const SEARCH_FIELD_OPTIONS = searchConfigGroup[0].items.map(item => item.value);

const SEARCH_TYPE_OPTIONS = searchConfigGroup[1].items.map(item => item.value);

const AdvancedCommand: React.FC<IAdvancedCommandProps> = () => {
  const [searchInput, setSearchInput] = useState<string>('');
  const [selectedConfig, setSelectedConfig] = useState<string[]>(['productName', 'sku', 'contains']);

  const searchFields = useMemo(() => {
    return selectedConfig.filter(item => SEARCH_FIELD_OPTIONS.includes(item));
  }, [selectedConfig]);

  const searchTypes = useMemo(() => {
    return selectedConfig.filter(item => SEARCH_TYPE_OPTIONS.includes(item));
  }, [selectedConfig]);

  const { isLoading, groups } = useArticleQuery(searchInput, { searchFields, searchTypes });

  /**
   * Handle debounced search input changes
   */
  const handleDebouncedSearch = useCallback((value: string) => {
    setSearchInput(value);
  }, []);

  /**
   * Handle Item Selection
   */
  const handleItemSelect = useCallback((item: CommandItem) => {
    console.log('Selected item:', item);
  }, []);

  /**
   * Handle Selection Change in Search Config.
   * The second argument \`currentInputValue\` allows re-triggering the search
   * immediately when the config changes without requiring a new keystroke.
   */
  const handleSelectionChange = useCallback((selectedItems: string[], currentInputValue: string) => {
    setSelectedConfig(selectedItems);
    setSearchInput(currentInputValue);
  }, []);

  /**
   * Search Config Handler
   */
  const searchConfig: SearchConfigHandler = {
    groups: searchConfigGroup,
    onSelectionChange: handleSelectionChange,
    defaultSelectedItem: selectedConfig,
  };

  /**
   * Footer
   */
  const footer = (
    <Text type="small" weight="medium" align="center">
      Primary
    </Text>
  );

  return (
    <Box className="space-y-4">
      <Command
        variant={CommandVariant.DETAILED}
        groups={groups}
        isLoading={isLoading}
        onDebouncedValueChange={handleDebouncedSearch}
        onItemSelect={handleItemSelect}
        searchConfig={searchConfig}
        delay={400}
        showLoadingOnType={true}
        shouldFilter={false}
        placeholder="Search with configuration..."
        loadingLabel="Searching..."
        footer={!isLoading && footer}
      />

      {/* Search Configuration Display */}
      <Box className="p-3 bg-[var(--soft-bg-coral)] rounded-md text-sm">
        <Text type="small" weight="medium">
          <strong>Active Config:</strong> {selectedConfig.join(', ') || 'None selected'}
        </Text>
      </Box>
    </Box>
  );
};

export default AdvancedCommand;`;
export {
  s as default
};
//# sourceMappingURL=advancedCommandSource.js.map
