import React, {memo, useCallback} from 'react';
import {FlatList, ListRenderItem} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {BaseForm, FormStepType} from '@modules/form/interfaces';
import FormChatRow from '@modules/form/components/FormChatRow';
import {useNavigation} from '@react-navigation/native';
import {Screens} from '@shared/constants';
import ActivityIndicator from '@components/ActivityIndicator';
import {Divider} from '@components';
import {wait} from '@shared/utils';

interface Props {
  formChats: BaseForm[];
  agentFormType?: FormStepType;
  loadingMore: boolean;
  handleGetMore: () => void;
  isLoading?: boolean;
  showLastMessage?: boolean;
  isResponsible?: boolean;
}

function FormChats({
  formChats,
  agentFormType,
  handleGetMore,
  loadingMore,
  isLoading,
  isResponsible,
}: Props) {
  const {bottom} = useSafeAreaInsets();
  const navigation = useNavigation();

  const onFormPress = useCallback(
    (form: BaseForm) => {
      if (form.needApproval) {
        navigation.navigate(Screens.FORM_CHAT_DETAIL, {
          id: form.formId,
          iAmApprover: !!isResponsible,
        });
      } else {
        navigation.navigate(Screens.CHAT_DETAIL, {
          chatId: form.chatId,
          isForm: true,
        });
      }
    },
    [isResponsible, navigation],
  );

  const renderItem: ListRenderItem<BaseForm> = useCallback(
    ({item}) => (
      <FormChatRow
        form={item}
        agentFormType={agentFormType}
        onPress={onFormPress}
        isResponsible={isResponsible}
      />
    ),
    [agentFormType, onFormPress, isResponsible],
  );

  const keyExtractor = useCallback(
    (item: BaseForm) => item.formId.toString(),
    [],
  );

  const onEndReached = useCallback(async () => {
    if (!loadingMore) {
      await wait(1000);
      handleGetMore();
    }
  }, [handleGetMore, loadingMore]);

  return (
    <FlatList
      data={formChats}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      onEndReached={onEndReached}
      ListFooterComponent={<ActivityIndicator isVisible={loadingMore} />}
      ListEmptyComponent={isLoading ? <ActivityIndicator /> : null}
      contentContainerStyle={{paddingBottom: bottom}}
      ItemSeparatorComponent={Divider}
    />
  );
}

export default memo(FormChats);