import React, { useCallback } from 'react';
import { SearchType } from '../../../types/search';
import { VariantType } from '../../../types/search';
import { MessageAdvanced } from './MessageAdvanced';
import styles from './SearchAdvanced.module.scss';
import { SearchTab } from './SearchTab';
import { UserAdvanced } from './UserAdvanced';
import type { SearchAdvancedProps, SearchTabType, SearchParamsMap } from '../../../types/search';

export function SearchAdvanced({
  variant,
  searchType,
  advancedParams,
  onAdvancedParamsChange,
  onTabChange,
}: SearchAdvancedProps) {
  const handleTabChange = useCallback((tab: SearchTabType) => {
    onTabChange?.(tab);
  }, [onTabChange]);

  return (
    <div className={styles.SearchAdvanced}>
      {variant === VariantType.STANDARD && (
        <SearchTab activeTab={searchType} onTabChange={handleTabChange} />
      )}
      {variant === VariantType.STANDARD && searchType === SearchType.MESSAGE && (
        <MessageAdvanced
          variant={variant}
          advancedParams={advancedParams as Map<SearchType, SearchParamsMap[SearchType]>}
          onAdvancedParamsChange={onAdvancedParamsChange}
        />
      )}
      {variant === VariantType.STANDARD && searchType === SearchType.USER && (
        <UserAdvanced
          variant={variant}
          advancedParams={advancedParams as Map<SearchType, SearchParamsMap[SearchType]>}
          onAdvancedParamsChange={onAdvancedParamsChange}
        />
      )}
    </div>
  );
}

export default React.memo(SearchAdvanced);