import React, {useState} from 'react';
import {FlatList, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconInfoCircle} from '@tabler/icons-react-native';
import {
  Avatar,
  InputSearch,
  ListEmpty,
  ListItem,
  RefreshControl,
  Spinner,
} from '@components';
import {useDebounce} from '@hooks/useDebounce';
import {useCursorInfinityQuery} from '@hooks/queries-v5/useCursorInfinityQuery';
import {Navigation} from '@interfaces/navigation';
import {SeenByResponse} from '@interfaces/user';
import {postQueryKeys} from '@modules/post/constants';
import {getGroupPostSeenBy, getPostSeenBy} from '@modules/post/services';
import {REDUCED_LIMIT} from '@services/constants';
import {DEFAULT_THRESHOLD, Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';
import {getCompleteName} from '@shared/utils';

import {styles} from './styles';

const keyExtractor = (item: SeenByResponse) => item.viewer.id.toString();

function PostSeenBy({
  navigation,
  route: {
    params: {id, groupId},
  },
}: Navigation<Screens.POST_SEEN_BY>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const [searchText, setSearchText] = useState('');
  const debouncedSearchText = useDebounce(searchText, 500);
  const {
    data = [],
    isLoading,
    isFetchingNextPage,
    isRefreshing,
    getNextPage,
    refresh,
  } = useCursorInfinityQuery({
    queryKey: postQueryKeys.postSeenBy(id, debouncedSearchText),
    queryFn: ({cursor, limit}) => {
      const commonParams = {
        postId: id,
        q: debouncedSearchText,
        cursor,
        limit,
      };
      return groupId
        ? getGroupPostSeenBy({...commonParams, groupId})
        : getPostSeenBy({...commonParams});
    },
    limit: REDUCED_LIMIT,
  });

  const onItemPress = (item: SeenByResponse) => () => {
    navigation.navigate(Screens.PROFILE, {userId: item.viewer.id});
  };

  const renderItem = ({item}: {item: SeenByResponse}) => (
    <ListItem
      onItemPress={onItemPress(item)}
      avatar={{url: item.viewer.profilePicture, name: item.viewer}}
      title={getCompleteName(item.viewer)}
    />
  );

  return (
    <View
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <View
        style={[
          styles.searchContainer,
          {borderBottomColor: theme.border.neutral.default},
        ]}>
        <InputSearch
          value={searchText}
          onChangeText={setSearchText}
          variant="secondary"
          placeholder={t('general.search_people')}
        />
      </View>
      <FlatList
        data={data}
        refreshControl={
          <RefreshControl refreshing={isRefreshing} onRefresh={refresh} />
        }
        renderItem={renderItem}
        onEndReached={getNextPage}
        onEndReachedThreshold={DEFAULT_THRESHOLD}
        ListFooterComponent={
          isFetchingNextPage ? (
            <View style={styles.spinnerContainer}>
              <Spinner />
            </View>
          ) : null
        }
        showsVerticalScrollIndicator={false}
        ListEmptyComponent={
          !isLoading ? (
            <ListEmpty
              IconComponent={<Avatar Icon={IconInfoCircle} size="lg" />}
              title={t('general.empty_search_result')}
            />
          ) : (
            <View style={styles.spinnerContainer}>
              <Spinner />
            </View>
          )
        }
        keyExtractor={keyExtractor}
      />
    </View>
  );
}

export default PostSeenBy;