import { useCallback, useEffect, useState } from 'react';
import { View, TouchableOpacity, Platform, Image } from 'react-native';
import * as Progress from 'react-native-progress';
import { SvgXml } from 'react-native-svg';
import { deleteAmityFile, uploadVideoFile } from '../../../core/legacy/file';
import { closeIcon, playBtn, toastIcon } from '../../../core/assets/icons/xml';
import { useStyles } from './styles';
import Video from 'react-native-video';
import { useNavigation } from '@react-navigation/native';
import uiSlice from '../../../core/stores/slices/uiSlice';
import { createVideoThumbnail } from 'react-native-compressor';
import { useUIKitDispatch } from '../../../core/stores/store';
const LoadingVideo = ({
  source,
  onClose,
  index,
  onLoadFinish,
  onUploadError,
  isUploaded = false,
  thumbNail,
  onPlay,
  fileId,
  isEditMode = false,
  fileCount,
  postId,
  setIsUploading
}) => {
  const dispatch = useUIKitDispatch();
  const {
    showToastMessage
  } = uiSlice.actions;
  const [loading, setLoading] = useState(true);
  const [progress, setProgress] = useState(0);
  const [isProcess, setIsProcess] = useState(false);
  const [isUploadError, setIsUploadError] = useState(false);
  const [thumbNailImage, setThumbNailImage] = useState(thumbNail ?? '');
  const styles = useStyles();
  const [playingUri, setPlayingUri] = useState('');
  const [isPause, setIsPause] = useState(true);
  const navigation = useNavigation();
  const playVideoFullScreen = fileUrl => {
    if (Platform.OS === 'ios') {
      setPlayingUri(fileUrl);
    } else {
      setIsPause(true);
      navigation.navigate('VideoPlayer', {
        source: source
      });
    }
  };
  const onClosePlayer = () => {
    setIsPause(true);
    setPlayingUri('');
  };
  const handleLoadEnd = () => {
    setLoading(false);
    setIsUploading(false);
  };
  const processThumbNail = async () => {
    const generatedThumbNail = await createVideoThumbnail(source);
    setThumbNailImage(generatedThumbNail.path);
  };
  useEffect(() => {
    processThumbNail();
  }, [thumbNail]);
  useEffect(() => {
    if (progress === 100) {
      setIsProcess(true);
    }
  }, [progress]);
  const uploadFileToAmity = useCallback(async () => {
    setIsUploading(true);
    setIsUploadError(false);
    try {
      const file = await uploadVideoFile(source, percent => {
        setProgress(percent);
      });
      if (file) {
        var _file$, _file$2, _file$3;
        setIsProcess(false);
        handleLoadEnd();
        onLoadFinish && onLoadFinish((_file$ = file[0]) === null || _file$ === void 0 ? void 0 : _file$.fileId, (_file$2 = file[0]) === null || _file$2 === void 0 ? void 0 : _file$2.fileUrl, (_file$3 = file[0]) === null || _file$3 === void 0 ? void 0 : _file$3.attributes.name, index, source, thumbNail);
      } else {
        handleLoadEnd();
        dispatch(showToastMessage({
          toastMessage: 'Failed to upload file'
        }));
        setIsProcess(false);
        setIsUploadError(true);
        onUploadError === null || onUploadError === void 0 || onUploadError(true, source);
      }
    } catch (error) {
      handleLoadEnd();
      dispatch(showToastMessage({
        toastMessage: 'Failed to upload file'
      }));
      setIsProcess(false);
      setIsUploadError(true);
      onUploadError === null || onUploadError === void 0 || onUploadError(true, source);
    }
  }, [source]);
  const handleDelete = async () => {
    if (fileId && !isEditMode) {
      await deleteAmityFile(fileId);
    }
    onClose && onClose(source, fileId, postId);
  };
  useEffect(() => {
    setIsUploadError(false);
    onUploadError === null || onUploadError === void 0 || onUploadError(false, source);
    setProgress(0);
    setIsProcess(false);
    if (isUploaded) {
      setLoading(false);
    } else {
      uploadFileToAmity();
    }
  }, [fileId, isUploaded, source]);
  const handleOnPlay = () => {
    setIsPause(!isPause);
    playVideoFullScreen(source);
    onPlay && onPlay(source);
  };
  const onRetryUpload = () => {
    uploadFileToAmity();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: fileCount >= 3 ? styles.image3XContainer : styles.container
  }, !loading && !isUploadError && isPause && /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.playButton,
    onPress: handleOnPlay
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: playBtn,
    width: "50",
    height: "50"
  })), playingUri && !isPause ? /*#__PURE__*/React.createElement(Video, {
    controls: true,
    style: styles.image,
    source: {
      uri: playingUri
    },
    onFullscreenPlayerWillDismiss: onClosePlayer,
    paused: isPause
  }) : thumbNailImage ? /*#__PURE__*/React.createElement(Image, {
    resizeMode: "cover",
    source: {
      uri: thumbNailImage
    },
    style: [styles.image, loading ? styles.loadingImage : styles.loadedImage]
  }) : /*#__PURE__*/React.createElement(View, {
    style: styles.image
  }), loading ? /*#__PURE__*/React.createElement(View, {
    style: styles.overlay
  }, isProcess ? /*#__PURE__*/React.createElement(Progress.CircleSnail, {
    size: 24,
    borderColor: "transparent",
    thickness: 2
  }) : /*#__PURE__*/React.createElement(Progress.Circle, {
    progress: progress / 100,
    size: 24,
    borderColor: "transparent",
    unfilledColor: "#ffffff",
    thickness: 2
  })) : isUploadError ? /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.overlay,
    onPress: onRetryUpload
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: toastIcon(),
    width: "24",
    height: "24"
  })) : /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.closeButton,
    disabled: (loading || isProcess) && !isUploadError,
    onPress: handleDelete
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: closeIcon('white'),
    width: "12",
    height: "12"
  })));
};
export default LoadingVideo;
//# sourceMappingURL=index.js.map