import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Box } from '../box';
import { styled, useStyleConfig, vui } from '../core';
import { T } from '../t';
import { cs } from '../utils';
import { absCenterStyles, labelBottom, maxValue } from './consts';
export const ProgressCircularBase = styled.divBox `
  display: flex;
  position: relative;
  width: 100%;
`;
const MainCircle = styled.circle `
  fill: transparent;
`;
const ProgressCircle = styled(MainCircle) `
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease-out;
`;
/** Indicates a process progress. */
export const ProgressCircular = vui((props, ref) => {
    const { children, className, label, value = 0, showPercentage, ...rest } = props;
    const styles = useStyleConfig('ProgressCircular', props);
    const [progress, setProgress] = useState(value);
    useEffect(() => {
        setProgress(value ? Math.ceil(value) : 0);
    }, [value]);
    useEffect(() => {
        const w = !value ? 0 : Math.ceil(value);
        setProgress(w > maxValue ? maxValue : w);
    }, [value]);
    const radius = maxValue / 2 - styles.strokeWidth * 2;
    const angle = radius * 2 * Math.PI;
    const offset = angle - (progress / maxValue) * angle;
    return (_jsxs(ProgressCircularBase, { className: cs('vui-progress-circular', className), ref: ref, w: styles.width, ...rest, children: [_jsxs("svg", { "aria-valuemax": maxValue, "aria-valuemin": 0, "aria-valuenow": progress, height: styles.width, role: "meter", version: "1.1", viewBox: "0 0 100 100", width: styles.width, xmlns: "http://www.w3.org/2000/svg", children: [_jsx(MainCircle, { cx: "50", cy: "50", r: radius, stroke: styles.stroke.main, strokeWidth: styles.strokeWidth }), _jsx(ProgressCircle, { cx: "50", cy: "50", r: radius, stroke: styles.stroke.progress, strokeDasharray: `${angle} ${angle}`, strokeDashoffset: offset, strokeWidth: styles.strokeWidth })] }), _jsx(Box, { ...absCenterStyles, top: styles.top, children: children ? (children) : showPercentage ? (_jsxs(T, { color: styles.color, fontSize: styles.fontSize, children: [progress, "%"] })) : null }), !!label && (_jsx(Box, { ...absCenterStyles, bottom: labelBottom, children: _jsx(T, { color: styles.color, fontSize: styles.fontSize, children: label }) }))] }));
});
ProgressCircular.displayName = 'ProgressCircular';
export default ProgressCircular;
//# sourceMappingURL=progressCircular.js.map