import React, {useCallback} from 'react';
import {useTranslation} from 'react-i18next';
import {IconFileSearch} from '@tabler/icons-react-native';
import {FileList, File, SignatureStatus} from '@components';
import {useInfiniteQuery} from '@hooks/queries-v5/useInfiniteQuery';
import {Navigation} from '@interfaces/navigation';
import {getDocuments} from '@modules/documents/services';
import {useAskForPassword, useCantSignDialog} from '@modules/documents/hooks';
import {DOCUMENT_QUERY_KEYS} from '@modules/documents/constants';
import {Screens} from '@shared/constants';

import {styles} from './styles';

function PendingFiles({navigation}: Navigation<Screens.PENDING_FILES>) {
  const {t} = useTranslation();
  const {CantSignDialog, showCantSignDialog} = useCantSignDialog();
  const {PasswordDialog, askForPassword} = useAskForPassword();
  const {
    data: allPendingDocuments,
    isLoading,
    isFetchingNextPage,
    getNextPage,
  } = useInfiniteQuery(DOCUMENT_QUERY_KEYS.allPendingDocuments, params =>
    getDocuments({...params, signatureStatus: SignatureStatus.PENDING}),
  );

  const clickFileAction = useCallback(
    (file: File, callback: () => void) => () => {
      file.canBeSigned
        ? navigation.navigate(Screens.SIGN_DOCUMENT, {file})
        : showCantSignDialog();
      callback();
    },
    [navigation, showCantSignDialog],
  );

  const onPressFile = useCallback(
    (file: File, callback: () => void) => {
      askForPassword(clickFileAction(file, callback), callback);
    },
    [clickFileAction, askForPassword],
  );

  return (
    <>
      <FileList
        withPreview
        isLoading={isLoading}
        isLoadingMore={isFetchingNextPage}
        files={allPendingDocuments}
        emptyComponent={{
          Icon: IconFileSearch,
          title: t('documents.no_documents_available'),
        }}
        onPressFile={onPressFile}
        onEndReached={getNextPage}
        containerStyle={[
          styles.container,
          !isLoading && !allPendingDocuments?.length && styles.emptyList,
        ]}
      />
      {CantSignDialog}
      {PasswordDialog}
    </>
  );
}

export default PendingFiles;