import React, {useCallback} from 'react';
import {FlatList, ListRenderItem, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useQueryClient} from 'react-query';
import {Divider, VoiceFlowWebChat, RefreshControl} from '@components';
import ActivityIndicator from '@components/ActivityIndicator';
import {useGetChats} from '@modules/chat/hooks';
import {ChatListItem} from '@modules/chat/interfaces';
import ChatRow, {CHAT_ROW_HEIGHT} from '@modules/chat/components/ChatRow';
import {EmptyChats} from '@modules/chat/components/EmptyChats';
import {CHAT_QUERY_KEYS} from '@modules/chat/constants';
import {SPACING} from '@shared/theme';

import {styles} from './styles';
import {ChatsHeader} from './components/ChatsHeader';
import {ChatsSubheader} from './components/ChatsSubHeader';

const getItemLayout = (
  data: ArrayLike<ChatListItem> | null | undefined,
  index: number,
) => {
  if (!data || !data[index]) {
    // Case when chat is null (regular chat without last message)
    return {
      length: 0,
      offset: CHAT_ROW_HEIGHT * index,
      index,
    };
  }
  return {
    length: CHAT_ROW_HEIGHT,
    offset: CHAT_ROW_HEIGHT * index,
    index,
  };
};

function Chats() {
  const queryClient = useQueryClient();
  const {top, bottom} = useSafeAreaInsets();
  const {
    chats,
    refresh,
    isRefreshing,
    getNextPage,
    isFetchingNextPage,
    isListEmpty,
  } = useGetChats();

  const renderItem: ListRenderItem<ChatListItem> = useCallback(
    ({item}) => <ChatRow chat={item} />,
    [],
  );

  const keyExtractor = useCallback(
    (item: ChatListItem) => item.chatId.toString(),
    [],
  );

  const onRefresh = useCallback(() => {
    // Refetch chat lists
    refresh();

    // Refetch archived list
    queryClient.refetchQueries(CHAT_QUERY_KEYS.archivedChats);
  }, [queryClient, refresh]);

  return (
    <View style={[styles.container, {paddingTop: top || SPACING.x2}]}>
      <ChatsHeader />
      <FlatList
        data={chats}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        ListHeaderComponent={ChatsSubheader}
        refreshControl={
          <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
        }
        onEndReached={getNextPage}
        ListFooterComponent={isFetchingNextPage ? <ActivityIndicator /> : null}
        ListEmptyComponent={isListEmpty ? <EmptyChats /> : null}
        contentContainerStyle={{
          paddingBottom: bottom,
        }}
        ItemSeparatorComponent={Divider}
        onEndReachedThreshold={0.5}
        getItemLayout={getItemLayout}
      />
      <VoiceFlowWebChat />
    </View>
  );
}

export default Chats;