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 } from '../../../../core/assets/icons/xml';
import { createStyles } from './styles';
import { useTheme } from 'react-native-paper';
const LoadingImage = ({
  source,
  onClose,
  index,
  onLoadFinish,
  isUploaded = false,
  fileId = '',
  isEditMode = false
}) => {
  const theme = useTheme();
  const [loading, setLoading] = useState(true);
  const [progress, setProgress] = useState(0);
  const [isProcess, setIsProcess] = useState(false);
  const styles = createStyles();
  const handleLoadEnd = () => {
    setLoading(false);
  };
  useEffect(() => {
    if (progress === 100) {
      setIsProcess(true);
    }
  }, [progress]);
  const uploadFileToAmity = useCallback(async () => {
    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);
    }
  }, [index, onLoadFinish, source]);
  const handleDelete = async () => {
    if (fileId) {
      onClose && onClose(source);
      if (!isEditMode) {
        await deleteAmityFile(fileId);
      }
    }
  };
  useEffect(() => {
    if (isUploaded) {
      setLoading(false);
    } else {
      uploadFileToAmity();
    }
  }, [isUploaded, source]);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Image, {
    source: {
      uri: source
    },
    style: [styles.image, loading ? styles.loadingImage : styles.loadedImage]
  }), loading && /*#__PURE__*/React.createElement(View, {
    style: styles.overlay
  }, isProcess ? /*#__PURE__*/React.createElement(Progress.CircleSnail, {
    size: 60,
    borderColor: "transparent"
  }) : /*#__PURE__*/React.createElement(Progress.Circle, {
    progress: progress / 100,
    size: 60,
    borderColor: "transparent",
    unfilledColor: "#ffffff"
  })), !loading && /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.closeButton,
    onPress: handleDelete
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: closeIcon(theme.colors.base),
    width: "12",
    height: "12"
  })));
};
export default LoadingImage;
//# sourceMappingURL=index.js.map