import {useCallback, useEffect, useState} from 'react';
import {Image, View} from 'react-native';
import Pdf from 'react-native-pdf';
import {
  File,
  Image as CustomImage,
  PdfLoadingIndicator,
  Spinner,
  Video,
} from '@components';
import {Attachment, FileAsset} from '@interfaces/attachments';
import {useTheme} from '@shared/theme';
import {SECURE_FILES_PATH, windowDimensions} from '@shared/constants';
import {
  isImage as isThisFileImage,
  isVideo as isThisFileVideo,
  isPdf as isThisFilePdf,
} from '@shared/utils';

import CantVisualizeFile from './components/CantVisualizeFile';
import {styles} from './styles';

const ASPECT_RATIO_DISCOUNT = 150;

interface Props {
  file: File | Attachment | FileAsset;
  isDownloading: boolean;
  onPressDownload: () => void;
}

function FileDisplayer({file, isDownloading, onPressDownload}: Props) {
  const {theme} = useTheme();
  const [aspectRatio, setAspectRatio] = useState(0);
  const isImage = isThisFileImage(file);
  const isVideo = isThisFileVideo(file);
  const isPdf = isThisFilePdf(file);
  const fileSource = file.source || file.url;
  const isSecureSource = !!fileSource?.includes(SECURE_FILES_PATH);

  useEffect(() => {
    if (!fileSource || !isImage) {
      return;
    }

    const onSetFallbackAspectRatio = () => {
      const fallbackHeight = Math.max(
        1,
        windowDimensions.height - ASPECT_RATIO_DISCOUNT,
      );
      setAspectRatio(windowDimensions.width / fallbackHeight);
    };

    setAspectRatio(0);
    Image.getSize(
      fileSource,
      (width, height) => {
        setAspectRatio(width / height);
      },
      onSetFallbackAspectRatio,
    );
  }, [isImage, fileSource]);

  const renderPdfLoader = useCallback(
    (progress: number) => <PdfLoadingIndicator progress={progress} />,
    [],
  );

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      {isImage ? (
        aspectRatio && fileSource ? (
          <CustomImage
            pinchable
            loaderType="spinner"
            withAuthHeader={isSecureSource}
            source={{uri: fileSource}}
            style={{
              backgroundColor: theme.background.layout.default,
              width: windowDimensions.width,
              height: windowDimensions.width / aspectRatio,
            }}
          />
        ) : (
          <Spinner />
        )
      ) : isVideo ? (
        <View style={styles.container}>
          <Video video={file as unknown as Attachment} />
        </View>
      ) : isPdf ? (
        <View style={styles.container}>
          <Pdf
            source={{uri: fileSource}}
            trustAllCerts={false}
            renderActivityIndicator={renderPdfLoader}
            style={styles.pdfContainer}
          />
        </View>
      ) : (
        <CantVisualizeFile
          isDownloading={isDownloading}
          onPressDownload={onPressDownload}
        />
      )}
    </View>
  );
}

export default FileDisplayer;