import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import uniqueId from '../../utils/uniqueId';
var GRADIENT_ID = uniqueId('zentAnimatedArcStrokeGradient');
var STROKE_OFFSET_RATIO = 0.2;
var STROKE_OPACITY = 0.2;
var ANIMATION_DURATION = 400;
var ANIMATION_DELAY = 1000;
var START_ROTATE = 0;
var DEFAULT_TRANSITION = {};
var NO_TRANSITION = {
    WebkitTransition: 'none',
    MozTransition: 'none',
    OTransition: 'none',
    msTransition: 'none',
    transition: 'none',
};
var AnimatedArc = (function (_super) {
    __extends(AnimatedArc, _super);
    function AnimatedArc() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            opacity: 0,
            rotate: START_ROTATE,
            transition: DEFAULT_TRANSITION,
        };
        _this.startAnimation = function () {
            if (_this.animationDelayTimerId) {
                clearTimeout(_this.animationDelayTimerId);
            }
            var _a = _this.props, arcLength = _a.arcLength, radius = _a.radius;
            var maskArcLength = _this.getMaskArcLength();
            var rotateRadian = (arcLength - maskArcLength) / radius;
            _this.setState({
                rotate: rotateRadian,
                transition: DEFAULT_TRANSITION,
                opacity: STROKE_OPACITY,
            }, _this.queueAnimationEnd);
        };
        _this.finishAnimation = function () {
            if (_this.transitionEndTimerId) {
                clearTimeout(_this.transitionEndTimerId);
            }
            _this.setState({
                rotate: START_ROTATE,
                transition: NO_TRANSITION,
                opacity: 0,
            });
            _this.animationDelayTimerId = setTimeout(_this.startAnimation, ANIMATION_DELAY);
        };
        _this.queueAnimationEnd = function () {
            _this.transitionEndTimerId = setTimeout(_this.finishAnimation, ANIMATION_DURATION);
        };
        return _this;
    }
    AnimatedArc.prototype.render = function () {
        var path = this.getPath();
        var _a = this.props, className = _a.className, strokeWidth = _a.strokeWidth;
        var _b = this.state, rotate = _b.rotate, transition = _b.transition, opacity = _b.opacity;
        return (_jsxs("g", __assign({ "data-zv": 'v10.0.11' }, { children: [_jsx("defs", __assign({ "data-zv": 'v10.0.11' }, { children: _jsxs("linearGradient", __assign({ id: GRADIENT_ID }, { children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255, 255, 255, 0)", "data-zv": 'v10.0.11' }, void 0), _jsx("stop", { offset: "100%", stopColor: "#fff", "data-zv": 'v10.0.11' }, void 0)] }), void 0) }), void 0), _jsx("path", { className: className, d: path, stroke: "url(#" + GRADIENT_ID + ")", strokeOpacity: opacity, strokeWidth: strokeWidth, style: __assign({ transform: "rotate(" + rotate + "rad)" }, transition), "data-zv": 'v10.0.11' }, void 0)] }), void 0));
    };
    AnimatedArc.prototype.componentDidMount = function () {
        this.startAnimation();
    };
    AnimatedArc.prototype.componentWillUnmount = function () {
        clearTimeout(this.animationDelayTimerId);
        clearTimeout(this.transitionEndTimerId);
        this.animationDelayTimerId = null;
        this.transitionEndTimerId = null;
    };
    AnimatedArc.prototype.getMaskArcLength = function () {
        var arcLength = this.props.arcLength;
        return arcLength * STROKE_OFFSET_RATIO;
    };
    AnimatedArc.prototype.getMaskTheta = function () {
        var radius = this.props.radius;
        var maskArcLength = this.getMaskArcLength();
        return maskArcLength / radius;
    };
    AnimatedArc.prototype.getArcStartPoint = function () {
        var _a = this.props, radius = _a.radius, strokeWidth = _a.strokeWidth;
        var w = strokeWidth / 2;
        return [radius + w, w];
    };
    AnimatedArc.prototype.getArcEndPoint = function () {
        var _a = this.props, radius = _a.radius, strokeWidth = _a.strokeWidth;
        var R = radius + strokeWidth / 2;
        var theta = this.getMaskTheta();
        var x = R + Math.sin(theta) * radius;
        var y = R - Math.cos(theta) * radius;
        return [x, y];
    };
    AnimatedArc.prototype.getPath = function () {
        var start = this.getArcStartPoint();
        var end = this.getArcEndPoint();
        var radius = this.props.radius;
        return "M" + start.join(',') + " A" + radius + "," + radius + " 0 0 1 " + end.join(',');
    };
    return AnimatedArc;
}(PureComponent));
export default AnimatedArc;
