import React from 'react';
import PropTypes from 'prop-types';
import styles from './style.scss'
import json from '../config.yaml';
class CircularProgressbar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            percentage: props.initialAnimation ? 0 : props.percentage
        };
    }

    componentDidMount() {
        if (this.props.initialAnimation) {
            this.initialTimeout = setTimeout(() => {
                this.requestAnimationFrame = window.requestAnimationFrame(() => {
                    this.setState({
                        percentage: this.props.percentage
                    });
                });
            }, 0);
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            percentage: nextProps.percentage
        });
    }

    componentWillUnmount() {
        clearTimeout(this.initialTimeout);
        window.cancelAnimationFrame(this.requestAnimationFrame);
    }

    getUsageClass(percentage){
        var usageClass = '';
        if(percentage >= 50){
            usageClass = json.progressPercentage.highUsage;
        } else if(percentage >= 20 && percentage < 50) {
            usageClass = json.progressPercentage.mediumUsage;
        } else {
            usageClass = json.progressPercentage.lowUsage;
        }
        return usageClass;
    }

        render() {
        const radius = (50 - this.props.strokeWidth / 2);
        const pathDescription = `
      M 50,50 m 0,-${radius}
      a ${radius},${radius} 0 1 1 0,${2 * radius}
      a ${radius},${radius} 0 1 1 0,-${2 * radius}
    `;

        const diameter = Math.PI * 2 * radius;
        const progressStyle = {
            strokeDasharray: `${diameter}px ${diameter}px`,
            strokeDashoffset: `${((100 - this.state.percentage) / 100 * diameter)}px`,
        };

        const usageClass = this.getUsageClass(this.state.percentage);

        return (
            <svg
                className={`CircularProgressbar ${this.props.classForPercentage ? this.props.classForPercentage(this.props.percentage) : ''}`}
                viewBox="0 0 100 100"
            >
                <path
                    className="CircularProgressbar-trail"
                    d={pathDescription}
                    strokeWidth={this.props.strokeWidth}
                    fillOpacity={0}
                />

                <path
                    className={`CircularProgressbar-path ${usageClass}`}
                    d={pathDescription}
                    strokeWidth={this.props.strokeWidth}
                    fillOpacity={0}
                    style={progressStyle}
                />

                <text
                    className="CircularProgressbar-text"
                    x={50}
                    y={50}
                >
                    {this.props.textForPercentage(this.props.percentage)}
                </text>
            </svg>
        );
    }
}

CircularProgressbar.propTypes = {
    percentage: PropTypes.number.isRequired,
    strokeWidth: PropTypes.number,
    initialAnimation: PropTypes.bool,
    classForPercentage: PropTypes.func,
    textForPercentage: PropTypes.func,
};

CircularProgressbar.defaultProps = {
    strokeWidth: 8,
    textForPercentage: (percentage) => `${percentage}%`,
    initialAnimation: false,
};

export default CircularProgressbar;
