import _isNull from "lodash/fp/isNull";
import React, { useMemo, useState, useEffect } from 'react';
import { CircularProgressBarPropTypes } from './types';
import style from './style.css';
const ProgressionGradient = () => /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
  id: "gradient-stroke-progression",
  x1: "81",
  y1: "0",
  x2: "81",
  y2: "162",
  gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React.createElement("stop", {
  stopColor: "#35CC7F"
}), /*#__PURE__*/React.createElement("stop", {
  offset: "1",
  stopColor: "#55F2A7"
})));
const CircularProgressBar = ({
  label,
  progression,
  size,
  strokeWidth,
  'aria-label': ariaLabel,
  'data-name': dataName
}) => {
  const [offset, setOffset] = useState(null);
  const {
    center,
    radius,
    length
  } = useMemo(() => {
    const center_ = size / 2;
    const radius_ = center_ - strokeWidth;
    const length_ = Math.ceil(2 * Math.PI * radius_);
    return {
      center: center_,
      radius: radius_,
      length: length_
    };
  }, [size, strokeWidth]);
  useEffect(() => setOffset(Math.ceil(length * ((100 - progression) / 100))), [length, progression]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "aria-label": ariaLabel,
    "data-name": dataName
  }, /*#__PURE__*/React.createElement("svg", {
    className: style.svg,
    width: size,
    height: size
  }, /*#__PURE__*/React.createElement(ProgressionGradient, null), /*#__PURE__*/React.createElement("circle", {
    className: style.mainCircle,
    cx: center,
    cy: center,
    r: radius,
    strokeWidth: 3,
    fill: "transparent"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: center,
    cy: center,
    r: radius - 10 / radius * 100,
    fill: "#fafafa"
  }), /*#__PURE__*/React.createElement("circle", {
    className: style.progressionCircle,
    cx: center,
    cy: center,
    r: radius,
    stroke: `url(#gradient-stroke-progression)`,
    strokeWidth: strokeWidth,
    strokeDasharray: length,
    strokeDashoffset: _isNull(offset) ? length : offset,
    fill: "transparent",
    strokeLinecap: "round"
  })), /*#__PURE__*/React.createElement("div", {
    className: style.infos
  }, /*#__PURE__*/React.createElement("span", {
    className: style.progression
  }, progression, "%"), /*#__PURE__*/React.createElement("span", {
    className: style.label
  }, label)));
};
CircularProgressBar.propTypes = process.env.NODE_ENV !== "production" ? CircularProgressBarPropTypes : {};
export default CircularProgressBar;
//# sourceMappingURL=index.js.map