import React, {
  useState,
  useCallback,
  useEffect,
  useRef,
  useMemo,
} from 'react';
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';
import InfiniteScroll from 'react-infinite-scroller';

const MembersInRole = React.forwardRef(({ role, ...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: 'getRoleMembers',
          params: {
            id: role._id,
            pageToken: nextPageToken,
          },
        })
        .then((res) => {
          setMembers(({ members: preMembers }) => ({
            loading: false,
            members: nextPageToken
              ? [...preMembers, ...res.data.result.result]
              : res.data.result.result,
            pageToken: res.data.result.nextPageToken,
          }));
        });
    },
    [role],
  );

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

  const breadData = [
    {
      name: '角色',
      id: 'role',
    },
    {
      name: role.name,
      id: role._id,
    },
  ];

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

  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={`搜索 ${role.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={role} type="role" />
            <div className="uiless-member-team-line" />
            <InfiniteScroll
              loadMore={() => fetchMembersPagination(pageToken)}
              hasMore={!!pageToken && !searchText}
              loader={<Loading className="scroll-loading" />}
              useWindow={false}
              getScrollParent={() => scrollParent.current}
            >
              <UilessMemberList data={currentMembers} {...props} />
            </InfiniteScroll>
          </>
        )}
      </div>
    </div>
  );
});

export default MembersInRole;