import { useState } from 'react';
import {
  SearchType,
  SearchStore,
} from '@tencentcloud/chat-uikit-react';
import './styles.css';

function SearchStoreBasicDemo() {
  const {
    hasMoreUsers,
    search,
    searchMore,
    userList,
    userTotalCount,
  } = SearchStore.create();

  const [keyword, setKeyword] = useState('');
  const [hasSearched, setHasSearched] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleSearch = async () => {
    const nextKeyword = keyword.trim();
    if (!nextKeyword) {
      return;
    }

    setIsLoading(true);
    setHasSearched(true);
    try {
      await search([nextKeyword], {
        pageSize: 20,
        searchScope: [SearchType.User],
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handleLoadMore = async () => {
    setIsLoading(true);
    try {
      await searchMore(SearchType.User);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="search-store-basic-demo">
      <div className="search-store-basic-demo__header">
        <h2>Search Store Basic</h2>
        <p>Very simple user search powered by SearchStore.</p>
      </div>

      <div className="search-store-basic-demo__toolbar">
        <input
          onChange={event => setKeyword(event.target.value)}
          onKeyDown={event => {
            if (event.key === 'Enter') {
              handleSearch();
            }
          }}
          placeholder="Enter user keyword"
          value={keyword}
        />
        <button disabled={isLoading || !keyword.trim()} onClick={handleSearch} type="button">
          {isLoading ? 'Searching...' : 'Search'}
        </button>
      </div>

      <div className="search-store-basic-demo__panel">
        <h3>Users ({userTotalCount})</h3>
        {userList.length > 0 ? (
          <ul className="search-store-basic-demo__list">
            {userList.map(user => (
              <li className="search-store-basic-demo__item" key={user.userID}>
                <span className="search-store-basic-demo__avatar">
                  {(user.nickname || user.userID).slice(0, 1).toUpperCase()}
                </span>
                <span>
                  <strong>{user.nickname || user.userID}</strong>
                  <small>{user.userID}</small>
                </span>
              </li>
            ))}
          </ul>
        ) : (
          <div className="search-store-basic-demo__empty">
            {hasSearched ? 'No users found.' : 'Enter a keyword and search.'}
          </div>
        )}
      </div>

      {hasMoreUsers && (
        <button
          className="search-store-basic-demo__more"
          disabled={isLoading}
          onClick={handleLoadMore}
          type="button"
        >
          Load More
        </button>
      )}
    </div>
  );
}