function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import { StyleSheet, Animated, Easing } from 'react-native';
import { Box, Text } from '../../primitives';
import styled from 'styled-components/native';
import { color, border } from 'styled-system';
import { usePropsConfig } from '../../../theme';
const StyleAnimatedView = styled(Animated.View)(color, border);

const CircularProgress = ({
  value,
  size,
  isIndeterminate,
  thickness,
  color: colorProp,
  trackColor,
  max,
  min,
  ...props
}) => {
  if (min) {
    value = value - min;
  }

  if (!size) {
    size = 'md';
  }

  let sizeProps;
  let newProps = usePropsConfig('CircularProgress', {
    size: size
  });

  if (typeof size === 'string') {
    sizeProps = {
      height: newProps.height,
      width: newProps.width
    };
  } else {
    sizeProps = {
      height: size,
      width: size
    };
  }

  let defaultThickness = 4;

  if (thickness) {
    defaultThickness = thickness;
  }

  const degree = new Animated.Value(0);

  if (isIndeterminate) {
    Animated.loop(Animated.timing(degree, {
      toValue: 1,
      duration: 600,
      easing: Easing.linear,
      useNativeDriver: true
    })).start();
  }

  const [viewHeight, setViewHeight] = React.useState(0);

  const layout = e => {
    let height = e.nativeEvent.layout.height;
    setViewHeight(height);
  };

  const defaultStyling = {
    borderBottomLeftRadius: viewHeight / 2,
    borderBottomRightRadius: viewHeight / 2,
    borderTopLeftRadius: viewHeight / 2,
    borderTopRightRadius: viewHeight / 2,
    borderLeftWidth: defaultThickness,
    borderBottomWidth: defaultThickness,
    position: 'absolute',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    ...sizeProps
  };
  const styles = StyleSheet.create({
    firstProgressLayer: {
      borderTopWidth: defaultThickness,
      borderRightWidth: defaultThickness,
      ...defaultStyling,
      transform: [{
        rotateZ: '-135deg'
      }]
    },
    secondProgressLayer: {
      borderTopWidth: defaultThickness,
      borderRightWidth: defaultThickness,
      ...defaultStyling,
      transform: [{
        rotateZ: '45deg'
      }]
    },
    offsetLayer: {
      borderTopWidth: defaultThickness,
      borderRightWidth: defaultThickness,
      ...defaultStyling,
      borderRadius: viewHeight / 2,
      transform: [{
        rotateZ: '-135deg'
      }]
    },
    animateStyle: {
      borderTopWidth: defaultThickness,
      borderRightWidth: defaultThickness,
      ...defaultStyling,
      transform: [{
        rotateZ: degree.interpolate({
          inputRange: [0, 1],
          outputRange: ['0deg', '360deg']
        })
      }]
    }
  });
  let halfSide = (max ? min ? max - min : max : 100) / 2; // calculating the halfvalue of the progress according to min and max

  const propStyle = (percent, base_degrees) => {
    const rotateBy = base_degrees + percent * 180 / halfSide;
    return {
      transform: [{
        rotateZ: rotateBy + 'deg'
      }]
    };
  };

  const renderThirdLayer = percent => {
    if (percent > halfSide) {
      return /*#__PURE__*/React.createElement(Box, {
        borderTopColor: colorProp ? colorProp : 'green.400',
        borderRightColor: colorProp ? colorProp : 'green.400',
        style: [styles.secondProgressLayer, propStyle(percent - halfSide, 45)]
      });
    } else {
      return /*#__PURE__*/React.createElement(Box, {
        borderTopColor: trackColor ? trackColor : 'gray.200',
        borderRightColor: trackColor ? trackColor : 'gray.200',
        style: styles.offsetLayer
      });
    }
  };

  let firstProgressLayerStyle;

  if (value > halfSide) {
    firstProgressLayerStyle = propStyle(halfSide, -135);
  } else {
    firstProgressLayerStyle = propStyle(value, -135);
  }

  return /*#__PURE__*/React.createElement(Box, _extends({}, sizeProps, {
    rounded: 100,
    borderWidth: defaultThickness,
    borderColor: trackColor ? trackColor : 'gray.200',
    justifyContent: "center",
    alignItems: "center"
  }, props), !isIndeterminate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
    onLayout: layout,
    borderTopColor: colorProp ? colorProp : 'green.400',
    borderRightColor: colorProp ? colorProp : 'green.400',
    style: [styles.firstProgressLayer, firstProgressLayerStyle]
  }), renderThirdLayer(value), /*#__PURE__*/React.createElement(Box, {
    fontSize: sizeProps.height / 4
  }, props.children)) : /*#__PURE__*/React.createElement(StyleAnimatedView, {
    onLayout: layout,
    borderTopColor: colorProp ? colorProp : 'green.400',
    borderRightColor: colorProp ? colorProp : 'green.400',
    style: styles.animateStyle
  }));
};

export const CircularProgressLabel = props => {
  return /*#__PURE__*/React.createElement(Text, props);
};
export default CircularProgress;
//# sourceMappingURL=index.js.map