import { useCallback, useEffect, useState } from 'react';
import { View, Image, TouchableOpacity } from 'react-native';
import * as Progress from 'react-native-progress';
import { SvgXml } from 'react-native-svg';
import { deleteAmityFile, uploadImageFile } from '../../../core/legacy/file';
import { closeIcon, toastIcon } from '../../../core/assets/icons/xml';
import { useStyles } from './styles';
const LoadingImage = ({
  source,
  onClose,
  index,
  onLoadFinish,
  onUploadError,
  isUploaded = false,
  fileId = '',
  isEditMode = false,
  fileCount,
  postId,
  setIsUploading
}) => {
  const [loading, setLoading] = useState(true);
  const [progress, setProgress] = useState(0);
  const [isProcess, setIsProcess] = useState(false);
  const [isUploadError, setIsUploadError] = useState(false);
  const styles = useStyles();
  const handleLoadEnd = useCallback(() => {
    setLoading(false);
    setIsUploading(false);
  }, [setIsUploading]);
  useEffect(() => {
    if (progress === 100) {
      setIsProcess(true);
    }
  }, [progress]);
  const uploadFileToAmity = useCallback(async () => {
    setIsUploading(true);
    setIsUploadError(false);
    try {
      const file = await uploadImageFile(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) + '?size=medium', (_file$3 = file[0]) === null || _file$3 === void 0 ? void 0 : _file$3.attributes.name, index, source);
      } else {
        setIsUploading(false);
        handleLoadEnd();
        setIsProcess(false);
        setIsUploadError(true);
        onUploadError === null || onUploadError === void 0 || onUploadError(true, source);
      }
    } catch (error) {
      handleLoadEnd();
      setIsProcess(false);
      setIsUploading(false);
      setIsUploadError(true);
      onUploadError === null || onUploadError === void 0 || onUploadError(true, source);
    }
  }, [handleLoadEnd, index, onLoadFinish, onUploadError, setIsUploading, 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();
    }
  }, [isUploaded, source]);
  const onRetryUpload = () => {
    uploadFileToAmity();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: fileCount >= 3 ? styles.image3XContainer : styles.container
  }, /*#__PURE__*/React.createElement(Image, {
    source: {
      uri: source
    },
    resizeMode: "contain",
    style: [styles.image, loading ? styles.loadingImage : styles.loadedImage]
  }), 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
  })), !loading && isUploadError && /*#__PURE__*/React.createElement(View, {
    style: styles.failedOverlay
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.errorOverlay,
    onPress: onRetryUpload
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: toastIcon(),
    width: "28",
    height: "28"
  }))), /*#__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 LoadingImage;
//# sourceMappingURL=index.js.map