import React from 'react';

import './treat-progress.less';

export default class TreatProgress extends React.Component {

    componentWillMount() {
        this.setState({ value: 0 });

        const self = this;
        setTimeout(() => {
            self.setState({ value: self.props.value });
        }, 300);
    }

    render() {
        const val = this.state.value;
        const r = 90;

        const c = Math.PI * r * 2;
        var pct = (100 - val) / 100 * c;

        return React.createElement(
            'div',
            { id: 'cont', 'data-pct': this.props.value },
            React.createElement(
                'svg',
                { id: 'svg', width: this.props.width, height: this.props.height, viewBox: '0 0 220 220' },
                React.createElement('circle', { r: '90', cx: '110', cy: '110',
                    fill: 'transparent', strokeDashoffset: '0',
                    strokeDasharray: '565.48' }),
                React.createElement('circle', { id: 'bar', r: '90', cx: '110', cy: '110',
                    fill: 'transparent',
                    strokeDasharray: '565.48',
                    style: { strokeDashoffset: pct } }),
                React.createElement(
                    'text',
                    { x: '110', y: '130', fontSize: '56', textAnchor: 'middle' },
                    this.props.value + '%'
                )
            ),
            this.props.label && React.createElement(
                'div',
                null,
                this.props.label
            )
        );
    }
}

TreatProgress.propTypes = {
    value: React.PropTypes.number,
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    label: React.PropTypes.string
};

TreatProgress.defaultProps = {
    width: 100,
    height: 100
};