import React, {useState} from 'react';
import {View, SectionList} from 'react-native';
import {useTranslation} from 'react-i18next';
import EmptyListPlaceholder from '@components/EmptyListPlaceholder';
import Text from '@components/Text';
import ActivityIndicator from '@components/ActivityIndicator';
import {INITIAL_PAGE} from '@services/constants';
import {isCloseToBottomWithTimer} from '@shared/utils';

import {styles} from './styles';
import {BaseUser, UsersSectionListProps} from './interfaces';
import UsersSectionListItem from './components/UsersSectionListItem';

// TODO: Pending migration to HuGo and move to `_custom` folder
function UsersSectionList<T extends BaseUser>({
  loading,
  loadingId,
  loadingMore,
  firstHeaderComponent: FirstHeaderComponent,
  secondHeaderComponent,
  users,
  showCheckbox,
  isChecked,
  onPress,
  usersList,
  getMoreUsers,
  contentContainerStyle,
  style,
  emptyStyle,
  filteredUsers = [],
  text = '',
  avoidDebouncePress,
}: UsersSectionListProps<T>) {
  const {t} = useTranslation();
  const [page, setPage] = useState(INITIAL_PAGE);
  const isEmptyFilteredUsers = !filteredUsers.length;
  const isSearching = !!text.length;

  return loading ? (
    <ActivityIndicator fullScreen />
  ) : (
    <View style={[styles.container, contentContainerStyle]}>
      {isEmptyFilteredUsers && isSearching ? (
        <View style={[styles.centerContentStyle, style]}>
          <Text variant="h5" style={styles.noResultsTextStyle}>
            {t('general.no_results')}
          </Text>
        </View>
      ) : users.length ? (
        <>
          {FirstHeaderComponent && <FirstHeaderComponent />}
          <SectionList
            keyboardShouldPersistTaps="always"
            style={style}
            sections={isEmptyFilteredUsers ? users : filteredUsers}
            keyExtractor={(item, index) => `${item.id}-${index}`}
            renderItem={({item}) => (
              <UsersSectionListItem
                item={item}
                showCheckbox={showCheckbox}
                isChecked={isChecked}
                onPress={onPress}
                withLoading={loadingId === item.id}
                avoidDebouncePress={avoidDebouncePress}
              />
            )}
            renderSectionHeader={({section: {title}}) => (
              <View style={styles.sectionHeader}>
                <Text variant="h6" style={styles.letterHeaderStyle}>
                  {title}
                </Text>
              </View>
            )}
            contentContainerStyle={styles.contentContainerStyle}
            ListHeaderComponent={secondHeaderComponent}
            onScroll={({nativeEvent}) => {
              if (
                !(usersList || loadingMore || isSearching) &&
                isCloseToBottomWithTimer(nativeEvent)
              ) {
                const currentPage = page + 1;
                getMoreUsers(currentPage);
                setPage(currentPage);
              }
            }}
            ListFooterComponent={
              <ActivityIndicator
                isVisible={loadingMore && isEmptyFilteredUsers}
              />
            }
          />
        </>
      ) : (
        <EmptyListPlaceholder
          icon="group"
          message={t('general.no_people')}
          customStyle={emptyStyle}
        />
      )}
    </View>
  );
}

export default UsersSectionList;