import { useStyles } from './styles';
import { Circle, Svg } from 'react-native-svg';
import { useEffect, useRef } from 'react';
import { StyleSheet, View, Animated } from 'react-native';
export const CircularProgressIndicator = ({
  progress,
  size = 50,
  strokeWidth = 4,
  backgroundColor = 'rgba(255, 255, 255, 0.5)',
  progressColor = 'white',
  backgroundOpacity = 1,
  duration = 1000
}) => {
  const styles = useStyles();
  const rotateAnim = useRef(new Animated.Value(0)).current;
  const radius = (size - strokeWidth) / 2;
  const circumference = radius * 2 * Math.PI;
  const isProgressMode = progress !== undefined;
  const strokeDashoffset = isProgressMode ? circumference - progress / 100 * circumference : 0;
  useEffect(() => {
    if (!isProgressMode) {
      Animated.loop(Animated.timing(rotateAnim, {
        toValue: 1,
        duration,
        useNativeDriver: true
      })).start();
    }
  }, [rotateAnim, duration, isProgressMode]);
  const rotate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  });
  const renderProgressVersion = () => /*#__PURE__*/React.createElement(Svg, {
    width: size,
    height: size,
    style: StyleSheet.absoluteFillObject
  }, /*#__PURE__*/React.createElement(Circle, {
    cx: size / 2,
    cy: size / 2,
    r: radius,
    stroke: backgroundColor,
    strokeWidth: strokeWidth,
    fill: "transparent",
    opacity: backgroundOpacity
  }), /*#__PURE__*/React.createElement(Circle, {
    cx: size / 2,
    cy: size / 2,
    r: radius,
    stroke: progressColor,
    strokeWidth: strokeWidth,
    fill: "transparent",
    strokeDasharray: `${circumference} ${circumference}`,
    strokeDashoffset: strokeDashoffset,
    strokeLinecap: "round",
    transform: `rotate(-90 ${size / 2} ${size / 2})`
  }));
  const renderRotatingVersion = () => /*#__PURE__*/React.createElement(Animated.View, {
    style: [StyleSheet.absoluteFillObject, {
      transform: [{
        rotate
      }]
    }]
  }, /*#__PURE__*/React.createElement(Svg, {
    width: size,
    height: size
  }, /*#__PURE__*/React.createElement(Circle, {
    cx: size / 2,
    cy: size / 2,
    r: radius,
    stroke: backgroundColor,
    strokeWidth: strokeWidth,
    fill: "transparent",
    opacity: backgroundOpacity,
    strokeDasharray: `${circumference} ${circumference}`
  }), /*#__PURE__*/React.createElement(Circle, {
    cx: size / 2,
    cy: size / 2,
    r: radius,
    stroke: progressColor,
    strokeWidth: strokeWidth,
    fill: "transparent",
    strokeDasharray: `${circumference * 0.25} ${circumference * 0.75}`,
    strokeLinecap: "round",
    transform: `rotate(-90 ${size / 2} ${size / 2})`
  })));
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, {
      width: size,
      height: size
    }]
  }, isProgressMode ? renderProgressVersion() : renderRotatingVersion());
};
//# sourceMappingURL=CircularProgressIndicator.js.map