import React from "react";
import styled from "styled-components";
import Text from "../../asorted/Text";
const StyledCircle = styled.circle.attrs({
    fill: "transparent",
    cx: "50%",
    cy: "50%",
}) `
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
`;
const StyledCircleBackground = styled(StyledCircle).attrs(props => ({
    stroke: props.stroke || props.theme.colors.primary.c30,
})) ``;
const StyledCircleFront = styled(StyledCircle).attrs(props => ({
    stroke: props.stroke || props.theme.colors.primary.c80,
})) ``;
const StyledCenteredText = styled(Text) `
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
`;
const StyledProgressLoaderContainer = styled.div `
  display: flex;
  position: absolute;
`;
const StyledSpinningContainer = styled.div `
  animation: rotation 1s infinite linear;
  display: flex;
  align-items: center;
  justify-content: center;
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
`;
function ProgressCircleSvg({ radius, stroke, progress, backgroundStrokeColor, frontStrokeColor, frontStrokeLinecap, }) {
    const normalizedRadius = radius - stroke / 2;
    const circumference = normalizedRadius * 2 * Math.PI;
    const strokeDashoffset = circumference - (progress / 100) * circumference;
    return (React.createElement("svg", { height: radius * 2, width: radius * 2 },
        React.createElement(StyledCircleBackground, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: 0 }, stroke: backgroundStrokeColor, r: normalizedRadius }),
        React.createElement(StyledCircleFront, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset }, stroke: frontStrokeColor, strokeLinecap: frontStrokeLinecap, r: normalizedRadius })));
}
export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, showPercentage = true, infinite, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }) {
    return (React.createElement(StyledProgressLoaderContainer, null,
        showPercentage && (React.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" },
            Math.floor(progress),
            "%")),
        infinite ? (React.createElement(StyledSpinningContainer, null,
            React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: 25, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor }))) : (React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor }))));
}
//# sourceMappingURL=index.js.map