import React, { useEffect, useCallback, useState, useMemo } from 'react';
import { Search, Loading } from '@txdfe/at';
import { debounce } from 'debounce';
import InfiniteScroll from 'react-infinite-scroller';
import exceed from '../../utils/api';
import SubjectItemList from '../subject/subject-list';

const GroupPanel = React.forwardRef((props, ref) => {
  const [searchText, setSearchText] = useState('');
  const [{ groups, loading: groupLoading, pageToken }, setGroups] = useState({
    groups: [],
    loading: true,
    pageToken: '',
  });
  const [{ searchGroups, loading: searchLoading }, setSearchData] = useState({
    searchGroups: [],
    loading: false,
  });

  const fetchGroupsPagination = useCallback((_pageToken) => {
    exceed
      .fetch({
        api: 'getOrganizationGroups',
      })
      .then((res) => res.data.result)
      .then(({ result, nextPageToken }) => {
        const cuurentGroups = result.map((group) => ({
          ...group,
          memberType: 'group',
          logo:
            group.logo ||
            'https://img.alicdn.com/tfs/TB1RiwmB4D1gK0jSZFsXXbldVXa-72-72.png',
        }));
        setGroups(({ groups: preGroups }) => ({
          loading: false,
          pageToken: nextPageToken,
          groups: _pageToken ? [...preGroups, ...cuurentGroups] : cuurentGroups,
        }));
      });
  }, []);

  const fetchSearchGroups = useCallback(
    debounce((q) => {
      exceed
        .fetch({
          api: 'searchGroups',
          data: {
            q,
          },
        })
        .then((res) => res.data.result)
        .then(({ result }) => {
          const cuurentGroups = result.map((group) => ({
            ...group,
            memberType: 'group',
            logo:
              group.logo ||
              'https://img.alicdn.com/tfs/TB1RiwmB4D1gK0jSZFsXXbldVXa-72-72.png',
          }));
          setSearchData({
            searchGroups: cuurentGroups,
            loading: false,
          });
        });
    }, 300),
    [setSearchData],
  );

  const handleSearch = useCallback(
    (text) => {
      console.log(text);
      setSearchText(text);
      if (text) {
        setSearchData((pre) => ({ ...pre, loading: true }));
        fetchSearchGroups(text);
      }
    },
    [fetchSearchGroups, setSearchText, setSearchData],
  );

  useEffect(() => {
    fetchGroupsPagination();
  }, [fetchGroupsPagination]);

  const loading = groupLoading || searchLoading;
  const currentGroups = useMemo(() => {
    return searchText ? searchGroups : groups;
  }, [groups, searchGroups, searchText]);

  return (
    <div className="uiless-member" ref={ref}>
      <div className="uiless-member-search-wrap">
        <Search
          value={searchText}
          onChange={handleSearch}
          className="uiless-member-search"
          placeholder="搜索群组"
        />
      </div>
      {loading && <Loading style={{ display: 'block' }} />}
      {!loading && (
        <div className="uiless-member-members">
          <InfiniteScroll
            loadMore={() => fetchGroupsPagination(pageToken)}
            hasMore={!!pageToken}
            loader={<Loading className="scroll-loading" />}
            useWindow={false}
          >
            <SubjectItemList {...props} subjects={currentGroups} />
          </InfiniteScroll>
        </div>
      )}
    </div>
  );
});

export default GroupPanel;