import { __assign, __rest } from "tslib";
import React, { useContext } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { strokePresetColors } from './types';
var Circle = function (props) {
    var _a;
    var _b = props.percent, percent = _b === void 0 ? 0 : _b, _c = props.strokeWidth, strokeWidth = _c === void 0 ? 8 : _c, _d = props.width, width = _d === void 0 ? 120 : _d, _e = props.strokeLinecap, strokeLinecap = _e === void 0 ? 'round' : _e, _f = props.strokeColor, strokeColor = _f === void 0 ? 'primary' : _f, _g = props.reverse, reverse = _g === void 0 ? false : _g, customisedCls = props.prefixCls, format = props.format, className = props.className, style = props.style, textStyle = props.textStyle, otherProps = __rest(props, ["percent", "strokeWidth", "width", "strokeLinecap", "strokeColor", "reverse", "prefixCls", "format", "className", "style", "textStyle"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('progress-circle', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var percentage = percent > 100 ? 100 : percent;
    percentage = percentage < 0 ? 0 : percentage;
    var strokeBgCls = classNames(prefixCls + "__path", (_a = {},
        _a[prefixCls + "__path_" + strokeColor] = strokePresetColors.includes(strokeColor),
        _a));
    var relativeStrokeWidth = function () {
        return ((strokeWidth / width) * 100).toFixed(1);
    };
    var trackPath = function () {
        var radius = 50 - parseFloat(relativeStrokeWidth()) / 2;
        return "M 50 50 m 0 -" + radius + " a " + radius + " " + radius + "\n         0 1 1 0 " + radius * 2 + " a " + radius + " " + radius + " 0 1 1 0 -" + radius * 2;
    };
    var _perimeter = function () {
        var radius = 50 - parseFloat(relativeStrokeWidth()) / 2;
        return 2 * Math.PI * radius;
    };
    var _circlePathStyle = function () {
        var perimeter = _perimeter();
        var strokeDash = reverse ? percentage / 100 + 1 : 1 - percentage / 100;
        return {
            strokeDasharray: perimeter + "px, " + perimeter + "px",
            strokeDashoffset: strokeDash * perimeter + 'px',
        };
    };
    var renderLabel = function () {
        return (React.createElement("div", { className: prefixCls + "__text", style: textStyle }, format ? format(percent) : percentage + "%"));
    };
    return (React.createElement("div", __assign({}, otherProps, { className: cls, style: __assign({ width: width, height: width }, style), "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percentage }),
        React.createElement("svg", { viewBox: "0 0 100 100", width: width, height: width },
            React.createElement("path", { className: prefixCls + "__bg", d: trackPath(), strokeWidth: relativeStrokeWidth() }),
            React.createElement("path", { className: strokeBgCls, d: trackPath(), strokeLinecap: strokeLinecap, strokeWidth: relativeStrokeWidth(), style: _circlePathStyle() })),
        renderLabel()));
};
Circle.displayName = 'Circle';
export default Circle;
//# sourceMappingURL=circle.js.map