import React, {useCallback, useEffect} from 'react';
import {View} from 'react-native';
import {t} from 'i18next';
import {IconFolderSearch} from '@tabler/icons-react-native';
import {Title, File, FileList} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {Navigation} from '@interfaces/navigation';
import {DocumentsAmplitudeSource} from '@modules/documents/interfaces';
import {
  useDocumentsListeners,
  useGetDocumentsData,
} from '@modules/documents/hooks';
import {AMPLITUDE_EVENTS, Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';
import {logAmplitudeEvent} from '@shared/utils';

import DocumentList from './components/DocumentList';
import DocumentsSk from './components/DocumentsSk';
import {styles} from './styles';

function Documents({
  navigation,
  route: {params},
}: Navigation<Screens.DOCUMENTS>) {
  const {spacing} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding({extra: spacing.x2});
  const {
    dataDocumentFolders,
    dataPendingDocuments,
    getMoreFolders,
    hasPendingDocuments,
    isFetchingMoreFolders,
    isLoading,
    pendingDocuments,
  } = useGetDocumentsData();

  useDocumentsListeners();

  useEffect(() => {
    logAmplitudeEvent(AMPLITUDE_EVENTS.DOCUMENTS_SECTION_VISITED, {
      source: params?.source ?? DocumentsAmplitudeSource.DIRECT_LINK,
    });
  }, [params?.source]);

  const getSubtitle = useCallback(
    (folderId: number) =>
      dataDocumentFolders.find(folder => folder?.id === folderId)?.name || '',
    [dataDocumentFolders],
  );

  const onPressFolder = useCallback(
    (folderId: number, folderName: string) => {
      navigation.navigate(Screens.DOCUMENTS_FILES, {folderId, folderName});
    },
    [navigation],
  );

  return isLoading ? (
    <DocumentsSk />
  ) : (
    <FileList
      withBorder
      withDivider
      // TODO: Improve this type for Folder
      files={dataDocumentFolders as unknown as File[]}
      onPressFolder={onPressFolder}
      onEndReached={getMoreFolders}
      containerStyle={[styles.mainContainer, {paddingBottom}]}
      ListHeaderComponent={
        <View>
          {hasPendingDocuments && (
            <DocumentList
              files={pendingDocuments!}
              getSubtitle={getSubtitle}
              showSeeMoreItems={dataPendingDocuments!.totalPages > 1}
            />
          )}
          <Title
            title={t('documents.folders')}
            style={[
              styles.titleText,
              hasPendingDocuments && styles.extraMargin,
            ]}
          />
        </View>
      }
      isLoadingMore={isFetchingMoreFolders}
      emptyComponent={{
        Icon: IconFolderSearch,
        title: t('documents.no_folders_assigned'),
      }}
    />
  );
}

export default Documents;