import type React from 'react';
import { useState, useCallback } from 'react';
import { useUIKit, IconAdd } from '@tencentcloud/uikit-base-component-react';
import classNames from 'classnames';
import { ContactItemType } from '../../../types/contact';
import { ExactSearch } from '../../SearchNew';
import styles from './ContactSearch.module.scss';
import type { ContactSearchProps } from '../../../types/contact';
import type { ExactSearchResult } from '../../SearchNew';

export const ContactSearch: React.FC<ContactSearchProps> = ({
  className,
  style,
  searchInputPlaceholder,
  onResultClick,
  onKeywordChange,
}) => {
  const { t } = useUIKit();
  const [isShowSearch, setIsShowSearch] = useState(false);

  const handleResultItemClick = useCallback((result: ExactSearchResult) => {
    switch (result.type) {
      case 'user':
        onResultClick?.({ type: ContactItemType.SEARCH_USER, data: result.data });
        break;
      case 'group':
        onResultClick?.({ type: ContactItemType.SEARCH_GROUP, data: result.data });
        break;
      default:
        break;
    }
  }, [onResultClick]);

  return (
    <div
      className={classNames(
        styles.contactSearch,
        isShowSearch && styles.contactSearch__search,
        className,
      )}
      style={style}
    >
      {!isShowSearch
        ? (
          <div className={styles.contactSearch__preSearch} onClick={() => setIsShowSearch(true)}>
            <label htmlFor="contactSearch__label" className={styles.contactSearch__add}>
              <IconAdd size="20px" />
            </label>
            <span className={styles.contactSearch__label}>{t('ContactList.add_friend_group')}</span>
          </div>
        )
        : (
          <ExactSearch
            {...(onKeywordChange !== undefined && { onKeywordChange })}
            onResultItemClick={handleResultItemClick}
            onCancel={() => setIsShowSearch(false)}
            cancelText={t('ContactList.cancel')}
            {...(searchInputPlaceholder !== undefined && { searchInputPlaceholder })}
            autoFocus
          />
        )}
    </div>
  );
};

export default ContactSearch;