import React from 'react';
import CircularProgressbar from 'react-circular-progressbar';
import PropTypes from 'prop-types';

/**
 * A stateless Progress Indicator. It uses react-circular-progressbar library and can accept the props used by the library to display percentage progress.
 */

const ProgressIndicator = (props) => {
    return (
        <div role='progressbar' className='jp-progressbar' tabIndex='0' aria-valuenow={props.percentage} aria-valuemin='0' aria-valuemax='100' style={{ width: props.divIndicatorWidth, margin: props.divIndicatorMargin }}>
            {props.percentage >= 0 && props.percentage <= 100 ?
                (<CircularProgressbar
                    className={props.className}
                    styles={{
                        // Customize the path, i.e. the part that's "complete"
                        path: {
                            stroke: props.strokeColor,
                            // Tweak path to use flat or rounded ends:
                            strokeLinecap: 'butt',
                            // Tweak transition animation:
                            transition: 'stroke-dashoffset 0.5s ease 0s',
                        },
                        // Customize the text
                        text: {
                            // Tweak text color:
                            fill: props.textColor,
                            // Tweak text size:
                            fontSize: props.fontSize,
                            //Tweak the weight
                            fontWeight: props.fontWeight,
                            // Display text in center of progressbar
                            dominantBaseline: props.dominantBaseline
                        },
                    }}
                    percentage={props.percentage}
                    text={`${props.percentage}%`}
                    strokeWidth={props.strokeWidth}
                    initialAnimation={props.initialAnimation} />

                ) : null}
        </div>
    );
};

ProgressIndicator.defaultProps = {
    /** Numeric percentage to display, from 0-100.*/
    percentage: 10,
    /** Width of the progress bar */
    divIndicatorWidth: 65,
    /** Margin of circular filler  */
    divIndicatorMargin: 10,
    /** Color of the stroke */
    strokeColor: '#1371ba',
    /** Percentage text color in the progress bar*/
    textColor: '#2a3c4d',
    /** Display text in center of progressbar */
    dominantBaseline: 'central',
    /** Percentage text size in the progress bar*/
    fontSize: '30px',
    /** Percentage text weight in the progress bar*/
    fontWeight: 'bold',
    /** Width of circular line */
    strokeWidth: 5,
    /** Toggle whether to animate progress */
    initialAnimation: true
};
ProgressIndicator.propTypes = {
    /** Width of the progress bar */
    divIndicatorWidth: PropTypes.number.isRequired,
    /** Margin of circular filler  */
    divIndicatorMargin: PropTypes.number.isRequired,
    /** Classes to apply to the svg element */
    className: PropTypes.string,
    /** dominantBaseline to display text in center of progressbar */
    dominantBaseline: PropTypes.string,
    /** Toggle whether to animate progress */
    initialAnimation: PropTypes.bool,
    /** Color of circular line */
    strokeColor: PropTypes.string,
    /** Width of circular line */
    strokeWidth: PropTypes.number,
    /** Percentage text size in the progress bar*/
    fontSize: PropTypes.string,
    /** Percentage text weight in the progress bar*/
    fontWeight: PropTypes.string,
    /** Percentage text color in the progress bar*/
    textColor: PropTypes.string,
    /** Numeric percentage to display, from 0-100.*/
    percentage: PropTypes.number.isRequired
};

export default ProgressIndicator;