import React, { useCallback, cloneElement } from 'react';
import { IconCloseCircleFilled, IconSearch, Input, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { VariantType } from '../../../types/search';
import styles from './SearchBar.module.scss';
import type { SearchBarProps } from '../../../types/search';

export function SearchBar({
  value,
  onChange,
  onKeyDown,
  onClear,
  placeholder,
  SearchIcon = <IconSearch />,
  ClearIcon,
  className = '',
  style,
  onFocus,
  onBlur,
  autoFocus = false,
  variant,
}: SearchBarProps) {
  const { t } = useUIKit();
  const handleClear = useCallback(() => {
    onClear?.();
  }, [onClear]);

  const searchPlaceholderMap = {
    [VariantType.EXACT]: t('Search.Search'),
    [VariantType.STANDARD]: t('Search.Search'),
    [VariantType.MINI]: t('Search.Search'),
    [VariantType.EMBEDDED]: t('Search.Search Messages'),
  };

  return (
    <div className={cs(styles.SearchBar, className)} style={style}>
      <Input
        type="text"
        className={styles.SearchBar__input}
        prefix={SearchIcon ? cloneElement(SearchIcon) : undefined}
        suffix={(
          <div className={styles.SearchBar__actions}>
            {value && (
              <div className={styles['SearchBar__clear-icon']} onClick={handleClear}>
                {ClearIcon || <IconCloseCircleFilled className={styles.clearIcon} />}
              </div>
            )}
          </div>
        )}
        value={value || ''}
        onChange={onChange}
        onKeyDown={onKeyDown}
        onFocus={onFocus}
        onBlur={onBlur}
        placeholder={placeholder || searchPlaceholderMap[variant || VariantType.STANDARD]}
        autoFocus={autoFocus}
        enterKeyHint="search"
      />
    </div>
  );
}

export default SearchBar;