/* eslint-disable react/prop-types */
import React from 'react';

const getCircumference = (radius) => Math.floor(Math.PI * (radius * 2));

// Returns value to fill SVG - by tenth of the circumference
const getCircleSection = (radius, section) =>
  Math.floor(getCircumference(radius) - section * (getCircumference(radius) / 10));

const CircleRating = ({ rating, radius, strokeWidth, gradientId, backgroundColor }) => (
  <svg xmlns="http://www.w3.org/2000/svg">
    <circle
      cx={radius + 10}
      cy={radius + 10}
      r={radius}
      stroke={backgroundColor}
      strokeWidth={strokeWidth}
      fill="transparent"
    />
    <circle
      cx={radius + 10}
      cy={radius + 10}
      r={radius}
      stroke={`url(#${gradientId})`}
      strokeLinecap="round"
      strokeWidth={strokeWidth}
      strokeDasharray={getCircumference(radius)}
      strokeDashoffset={getCircleSection(radius, rating)}
      fill="transparent"
    >
      <animate
        attributeName="stroke-dashoffset"
        values={`${getCircumference(radius)};${getCircleSection(radius, rating)}`}
        dur="0.1s"
        repeatCount="1"
      />
    </circle>
  </svg>
);

CircleRating.defaultProps = {
  gradientId: 'diagonal-gradient',
  backgroundColor: '#e2e9ed',
};

export default CircleRating;
