"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "CircleProgress", {
    enumerable: true,
    get: function() {
        return CircleProgress;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _components = require("@tarojs/components");
var _utils = require("../../utils");
var _typings = require("../../utils/typings");
var _useforceupdate = require("../../hooks/use-force-update");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    strokeWidth: 5,
    radius: 50,
    strokeLinecap: 'round',
    color: 'var(--nutui-color-primary, #ff0f23)',
    background: '#e5e9f2',
    clockwise: true
});
var classPrefix = "nut-circleprogress";
var CircleProgress = function CircleProgress(props) {
    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, percent = _ref.percent, className = _ref.className, radius = _ref.radius, background = _ref.background, clockwise = _ref.clockwise, color = _ref.color, strokeWidth = _ref.strokeWidth, style = _ref.style, strokeLinecap = _ref.strokeLinecap, restProps = (0, _object_without_properties._)(_ref, [
        "children",
        "percent",
        "className",
        "radius",
        "background",
        "clockwise",
        "color",
        "strokeWidth",
        "style",
        "strokeLinecap"
    ]);
    var oldValue = (0, _react.useRef)(percent);
    var forceUpdate = (0, _useforceupdate.useForceUpdate)();
    var classes = (0, _classnames.default)(classPrefix, className);
    var refRandomId = Math.random().toString(36).slice(-8);
    var animateIdRef = (0, _react.useRef)(0);
    var styles = (0, _object_spread._)({
        height: "".concat(Number(radius) * 2, "px"),
        width: "".concat(Number(radius) * 2, "px")
    }, style);
    (0, _react.useEffect)(function() {
        var startTime = Date.now();
        var startRate = Number(oldValue.current) // 30
        ;
        var endRate = Number(percent) // 40
        ;
        var duration = Math.abs((startRate - endRate) * 1000 / +100) // 100
        ;
        var animate = function animate1() {
            var now = Date.now();
            var progress = Math.min((now - startTime) / duration, 1);
            var rate = progress * (endRate - startRate) + startRate;
            oldValue.current = Math.min(Math.max(+rate, 0), 100);
            if (endRate > startRate ? rate < endRate : rate > endRate) {
                forceUpdate();
                animateIdRef.current = window.requestAnimationFrame(animate);
            } else {
                window.cancelAnimationFrame(animateIdRef.current);
            }
        };
        animateIdRef.current = window.requestAnimationFrame(animate);
        return function() {
            return window.cancelAnimationFrame(animateIdRef.current);
        };
    }, [
        percent
    ]);
    var stop = function stop() {
        if (!(0, _utils.isObject)(color)) {
            return [];
        }
        var colorArr = Object.keys(color).sort(function(a, b) {
            return parseFloat(a) - parseFloat(b);
        });
        var stopArr = [];
        colorArr.forEach(function(item) {
            var obj = {
                key: '',
                value: ''
            };
            obj.key = item;
            obj.value = color[item];
            stopArr.push(obj);
        });
        return stopArr;
    };
    var transColor = function transColor(color) {
        return color && color.replace('#', '%23');
    };
    var format = function format(progress) {
        return Math.min(Math.max(+progress, 0), 100);
    };
    var circleStyle = function circleStyle() {
        var stopArr = stop();
        var stopDom = [];
        if (stopArr) {
            stopArr.forEach(function(item) {
                var obj = '';
                obj = "%3Cstop offset='".concat(item.key, "' stop-color='").concat(transColor(item.value), "'/%3E");
                stopDom.push(obj);
            });
        }
        var perimeter = 283;
        var progress = +oldValue.current;
        var offset = perimeter * Number(format(parseFloat(progress.toFixed(1)))) / 100;
        var isWise = clockwise ? 1 : 0;
        var realColor = (0, _utils.isObject)(color) ? "url(%23".concat(refRandomId, ")") : transColor(color);
        var d = "M 50 50 m 0 -45 a 45 45 0 1 ".concat(isWise, " 0 90 a 45 45 0 1, ").concat(isWise, " 0 -90");
        var pa = "%3Cdefs%3E%3ClinearGradient id='".concat(refRandomId, "' x1='100%25' y1='0%25' x2='0%25' y2='0%25'%3E").concat(stopDom, "%3C/linearGradient%3E%3C/defs%3E");
        var path = "%3Cpath d='".concat(d, "' stroke-width='").concat(strokeWidth, "' stroke='").concat(transColor(background), "' fill='none'/%3E");
        var path1 = "%3Cpath d='".concat(d, "' stroke-width='").concat(strokeWidth, "' stroke-dasharray='").concat(offset, ",").concat(perimeter, "' stroke-linecap='round' stroke='").concat(transColor(realColor), "' fill='none'/%3E");
        return {
            background: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100'  xmlns='http://www.w3.org/2000/svg'%3E".concat(pa).concat(path).concat(path1, '%3C/svg%3E")'),
            width: '100%',
            height: '100%'
        };
    };
    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
        className: classes,
        style: styles
    }, restProps), /*#__PURE__*/ _react.default.createElement(_components.View, {
        style: circleStyle()
    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "nut-circleprogress-text"
    }, children));
};
CircleProgress.displayName = 'NutCircleProgress';
