import { useState } from 'react';
import { useStyles } from './styles';
import { FlatList, View } from 'react-native';
import SearchInput from '../../../../../components/SearchInput';
import { useCommunityMemberCollection } from '../../../../../hooks/collections/community/useCommunityMemberCollection';
import MemberItem from '../MemberItem';
import { useSearchMemberByDisplayNameCollection } from '../../../../../hooks/collections/search/useSearchMemberByDisplayNameCollection';
import MemberSkeleton from '../../../shared/components/MemberSkeleton';
function useMemberList({
  community
}) {
  const {
    styles,
    theme
  } = useStyles();
  const [search, setSearch] = useState('');
  const memberCollection = useCommunityMemberCollection({
    enabled: !!community,
    params: {
      communityId: community === null || community === void 0 ? void 0 : community.communityId,
      memberships: ['member'],
      limit: 20
    }
  });
  const searchMemberCollection = useSearchMemberByDisplayNameCollection({
    params: {
      search,
      communityId: community === null || community === void 0 ? void 0 : community.communityId
    },
    enabled: !!(search !== null && search !== void 0 && search.trim()) && !!community
  });
  const collection = search !== null && search !== void 0 && search.trim() ? searchMemberCollection : memberCollection;
  return {
    styles,
    theme,
    search,
    setSearch,
    collection
  };
}
const MemberList = ({
  community
}) => {
  const {
    search,
    setSearch,
    styles,
    collection
  } = useMemberList({
    community
  });
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
    style: styles.searchContainer
  }, /*#__PURE__*/React.createElement(SearchInput, {
    inputProps: {
      value: search,
      onChangeText: setSearch,
      placeholder: 'Search member'
    }
  })), collection.isLoading && /*#__PURE__*/React.createElement(View, {
    style: styles.skeletonContainer
  }, /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null)), /*#__PURE__*/React.createElement(FlatList, {
    data: collection.data,
    showsVerticalScrollIndicator: false,
    contentContainerStyle: styles.contentContainer,
    onEndReached: () => {
      var _collection$fetchNext;
      if (collection.hasNextPage && !collection.isFetchingNextPage) (_collection$fetchNext = collection.fetchNextPage) === null || _collection$fetchNext === void 0 || _collection$fetchNext.call(collection);
    },
    ListFooterComponent: collection.isFetchingNextPage ? /*#__PURE__*/React.createElement(View, {
      style: styles.skeletonContainer
    }, /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null)) : null,
    renderItem: ({
      item
    }) => /*#__PURE__*/React.createElement(MemberItem, {
      member: item,
      key: item.userId,
      refreshMembers: collection.refetch,
      communityId: community.communityId
    })
  }));
};
export default MemberList;
//# sourceMappingURL=MemberList.js.map