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

const RoleWithMemberPanel = React.forwardRef(
  ({ isCustomData, dataSource, ...props }, ref) => {
    const [{ roles, loading: roleLoading }, setData] = useState({
      roles: [],
      loading: true,
    });
    const [{ searchRoles, loading: searchLoading }, setSearchData] = useState({
      searchRoles: [],
      loading: false,
    });
    const [searchText, setSearchText] = useState('');

    const getRolesData = useCallback(() => {
      if (isCustomData) {
        setData({
          roles: groupMembers(dataSource).role,
          loading: false,
        });
      } else {
        exceed
          .fetch({
            api: 'getRoles',
          })
          .then(({ data }) => {
            const result = data.result.result || [];
            setData({
              roles: result.map((i) => ({ ...i, memberType: 'role' })),
              loading: false,
            });
          });
      }
    }, [isCustomData, dataSource]);

    const fetchSearchRoles = useCallback(
      debounce((q) => {
        exceed
          .fetch({
            api: 'searchRoles',
            data: {
              q,
            },
          })
          .then(({ data }) => {
            const result = data.result.result || [];
            setSearchData({
              searchRoles: result.map((i) => ({ ...i, memberType: 'role' })),
              loading: false,
            });
          });
      }, 300),
      [setSearchData],
    );

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

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

    const loading = roleLoading || searchLoading;
    const currentRoles = useMemo(() => {
      if (isCustomData) {
        return filterMembers(groupMembers(dataSource).role, searchText);
      }
      return searchText ? searchRoles : roles;
    }, [isCustomData, dataSource, searchText, searchRoles, roles]);

    return (
      <div className="uiless-member" ref={ref}>
        <div className="uiless-member-search-wrap">
          <Search
            className="uiless-member-search"
            value={searchText}
            onChange={handleSearch}
            placeholder="搜索角色"
          />
        </div>
        {loading && <Loading style={{ display: 'block' }} />}
        {!loading && (
          <div className="uiless-member-members">
            {isCustomData ? (
              <UilessMemberList data={currentRoles} {...props} />
            ) : (
              <SubjectItemList subjects={currentRoles} {...props} />
            )}
          </div>
        )}
      </div>
    );
  },
);

export default RoleWithMemberPanel;