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 { ExactSearchH5 } from '../../SearchNewH5';
import styles from './ContactSearch.module.scss';
import type { ContactSearchProps } from '../../../types/contact';
import type { ExactSearchH5Result } from '../../SearchNewH5';

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

  const handleResultItemClick = useCallback((result: ExactSearchH5Result) => {
    onResultClick?.({
      type: result.type === 'user'
        ? ContactItemType.SEARCH_USER
        : ContactItemType.SEARCH_GROUP,
      data: result.data as any,
    });
  }, [onResultClick]);

  const handleCancel = () => {
    setIsShowSearch(false);
    onKeywordChange?.('');
  };

  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 /></label>
            <span className={styles.contactSearch__label}>{t('ContactList.add_friend_group')}</span>
          </div>
        )
        : (
          <ExactSearchH5
            autoFocus
            cancelText={t('ContactList.cancel')}
            onCancel={handleCancel}
            onKeywordChange={onKeywordChange}
            onResultItemClick={handleResultItemClick}
          />
        )}
    </div>
  );
};

export default ContactSearch;