import React, {ReactNode} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Button} from '@components/_HuGo/Button';
import {Spinner} from '@components/_HuGo/Spinner';

import {PaginationType} from '../../interfaces';
import {styles} from './styles';

interface Props {
  isVisible?: boolean;
  isFetchingNextPage?: boolean;
  paginationType?: PaginationType;
  FetchingNextPageLoader?: ReactNode;
  onButtonPress?: () => void;
}

export function ListFooter({
  isFetchingNextPage,
  isVisible,
  paginationType,
  onButtonPress,
  FetchingNextPageLoader,
}: Props) {
  const {t} = useTranslation();

  if (!isVisible || paginationType === 'none') {
    return null;
  }

  return paginationType === 'button' ? (
    <View style={styles.loadMore}>
      <Button
        text={t('general.load_more')}
        onPress={onButtonPress}
        isLoading={isFetchingNextPage}
        variant="secondary"
      />
    </View>
  ) : paginationType === 'infiniteScroll' && isFetchingNextPage ? (
    <>
      {FetchingNextPageLoader || (
        <View style={styles.spinner}>
          <Spinner />
        </View>
      )}
    </>
  ) : null;
}
