import React, {
  useState,
  useCallback,
  useEffect,
  useRef,
  useMemo,
} from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import exceed from '../../utils/api';
import UilessMemberList from '../member-list';
import MemberTypeItem from '../member-type-item';
import { Loading, Search } from '@txdfe/at';
import AtPath from '@txdfe/at-path';

const MembersInGroup = React.forwardRef(({ group, ...props }, ref) => {
  const scrollParent = useRef();
  const [searchText, setSearchText] = useState('');
  const [{ members, loading, pageToken }, setMembers] = useState({
    members: [],
    loading: true,
  });

  const fetchMembersPagination = useCallback(
    (nextPageToken) => {
      exceed
        .fetch({
          api: 'getGroupMembers',
          params: {
            groupId: group._id,
            pageToken: nextPageToken,
          },
        })
        .then((res) => res.data.result)
        .then(({ result, nextPageToken: _pageToken }) => {
          setMembers(({ members: preMembers }) => ({
            loading: false,
            members: nextPageToken ? [...preMembers, ...result] : result,
            pageToken: _pageToken,
          }));
        });
    },
    [group],
  );

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

  const breadData = [
    {
      name: '群组',
      id: 'group',
    },
    {
      name: group.name,
      id: group._id,
    },
  ];

  const hanleClickBread = ({ id }) => {
    if (id === 'group') {
      props.pushHistoryByPage('group');
    }
  };

  const currentMembers = useMemo(() => {
    if (!searchText) {
      return members;
    }
    return members.filter(({ name, py, pinyin }) => {
      return (
        name.includes(searchText) ||
        (py && py.includes(searchText)) ||
        (pinyin && pinyin.includes(searchText))
      );
    });
  }, [searchText, members]);

  return (
    <div ref={ref} className="uiless-member">
      <div className="uiless-member-search-wrap">
        <Search
          className="uiless-member-search"
          autoFocus={false}
          value={searchText}
          onChange={setSearchText}
          placeholder={`搜索 ${group.name} 成员`}
        />
      </div>
      <div className="uiless-member-members" ref={scrollParent}>
        {loading ? (
          <Loading />
        ) : (
          <>
            <AtPath
              dataSource={breadData}
              className="uiless-member-path"
              maxWidth={408}
              itemClick={hanleClickBread}
            />
            <MemberTypeItem {...props} data={group} type="group" />
            <div className="uiless-member-team-line" />
            <InfiniteScroll
              loadMore={() => fetchMembersPagination(pageToken)}
              hasMore={!!pageToken}
              loader={<Loading className="scroll-loading" />}
              useWindow={false}
              getScrollParent={() => scrollParent.current}
            >
              <UilessMemberList data={currentMembers} {...props} />
            </InfiniteScroll>
          </>
        )}
      </div>
    </div>
  );
});

export default MembersInGroup;