import React, {useCallback, useEffect} from 'react';
import {t} from 'i18next';
import {IconFileSearch} from '@tabler/icons-react-native';
import {FileList, File, SignatureStatus} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {Navigation} from '@interfaces/navigation';
import {
  useAskForPassword,
  useCantSignDialog,
  useDocumentsFilesListeners,
  useGetDocumentsFilesData,
} from '@modules/documents/hooks';
import {AMPLITUDE_EVENTS, Screens} from '@shared/constants';
import {
  handleFileView,
  isImage,
  logAmplitudeEvent,
  sanitizeFileName,
} from '@shared/utils';

import {styles} from './styles';

function DocumentsFiles({
  navigation,
  route: {
    params: {folderId, folderName},
  },
}: Navigation<Screens.DOCUMENTS_FILES>) {
  const paddingBottom = useSafeAreaBottomPadding();
  const {CantSignDialog, showCantSignDialog} = useCantSignDialog();
  const {PasswordDialog, askForPassword} = useAskForPassword();
  const {
    folder,
    documents,
    getMoreDocuments,
    isFetchingMoreDocuments,
    isLoading,
  } = useGetDocumentsFilesData(folderId, folderName);

  useDocumentsFilesListeners(folderId);

  useEffect(() => {
    navigation.setOptions({title: folderName || folder?.name});
  }, [folder?.name, folderName, navigation]);

  const clickFileAction = useCallback(
    (file: File, callback: () => void) => () => {
      logAmplitudeEvent(AMPLITUDE_EVENTS.DOCUMENT_VIEW, {
        fileId: file.id,
        folderId,
      });
      if (file.signatureStatus === SignatureStatus.PENDING) {
        file.canBeSigned
          ? navigation.navigate(Screens.SIGN_DOCUMENT, {file})
          : showCantSignDialog();
        callback();
      } else {
        if (isImage(file)) {
          navigation.navigate(Screens.FILE_VISUALIZER, {file});
          callback();
          return;
        }
        handleFileView(
          {...file, name: sanitizeFileName(file.name)},
          () => {},
          callback,
        );
      }
    },
    [folderId, navigation, showCantSignDialog],
  );

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

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

export default DocumentsFiles;