import * as React from 'react';
import { VIEWBOX_CENTER_X, VIEWBOX_CENTER_Y } from './constants';
function Path(_ref) {
  var className = _ref.className,
    counterClockwise = _ref.counterClockwise,
    dashRatio = _ref.dashRatio,
    pathRadius = _ref.pathRadius,
    strokeWidth = _ref.strokeWidth,
    style = _ref.style;
  return /*#__PURE__*/React.createElement("path", {
    className: className,
    style: Object.assign({}, style, getDashStyle({
      pathRadius: pathRadius,
      dashRatio: dashRatio,
      counterClockwise: counterClockwise
    })),
    d: getPathDescription({
      pathRadius: pathRadius,
      counterClockwise: counterClockwise
    }),
    strokeWidth: strokeWidth,
    fillOpacity: 0
  });
}

// SVG path description specifies how the path should be drawn
function getPathDescription(_ref2) {
  var pathRadius = _ref2.pathRadius,
    counterClockwise = _ref2.counterClockwise;
  var radius = pathRadius;
  var rotation = counterClockwise ? 1 : 0;

  // Move to center of canvas
  // Relative move to top canvas
  // Relative arc to bottom of canvas
  // Relative arc to top of canvas
  return "\n      M ".concat(VIEWBOX_CENTER_X, ",").concat(VIEWBOX_CENTER_Y, "\n      m 0,-").concat(radius, "\n      a ").concat(radius, ",").concat(radius, " ").concat(rotation, " 1 1 0,").concat(2 * radius, "\n      a ").concat(radius, ",").concat(radius, " ").concat(rotation, " 1 1 0,-").concat(2 * radius, "\n    ");
}
function getDashStyle(_ref3) {
  var counterClockwise = _ref3.counterClockwise,
    dashRatio = _ref3.dashRatio,
    pathRadius = _ref3.pathRadius;
  var diameter = Math.PI * 2 * pathRadius;
  var gapLength = (1 - dashRatio) * diameter;
  return {
    // Have dash be full diameter, and gap be full diameter
    strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"),
    // Shift dash backward by gapLength, so gap starts appearing at correct distance
    strokeDashoffset: "".concat(counterClockwise ? -gapLength : gapLength, "px")
  };
}
export default Path;