import './demo7.css';
import Button from '../../button';
import Icon from '../../icon';
import Progress from '..';
import React from 'react';
import ReactDOM from 'react-dom';

interface PageStates{
  percent:number;
}
class CustomProgress extends React.Component <{}, PageStates> {
  addProgress: () => void;
  minusProgress: () => void;
  constructor(props) {
    super(props);
    this.addProgress = () => {
      this.setState(prevState => {
        return {
          percent: prevState.percent + 10,
        };
      });
    };

    this.minusProgress = () => {
      this.setState(prevState => {
        return {
          percent: prevState.percent - 10,
        };
      });
    };

    this.state = {
      percent: 0,
    };
  }

  render() {
    const state = this.state;
    return (
      <div>
        <div className="progress-panel">
          <Button.Group>
            <Button onClick={this.minusProgress} disabled={state.percent === 0}>
              <Icon type="minus" />
            </Button>
            <Button onClick={this.addProgress} disabled={state.percent === 100}>
              <Icon type="add" />
            </Button>
          </Button.Group>
        </div>

        <Progress percent={state.percent} progressive size="large" />
        <br />
        <br />
        <Progress
          percent={state.percent}
          progressive
          shape="circle"
          size="large"
        />
      </div>
    );
  }
}
ReactDOM.render(
  <CustomProgress />,
  document.getElementById('progress-demo-7'),
);