import React from 'react';
import ReactDOM from 'react-dom';

import { Button, ButtonGroup } from '@progress/kendo-react-buttons';

class ButtonGroupContainer extends React.Component {
  state = {
    selected: null
  }
  groupButtonClick = (e) => {
    this.setState({
      selected: e.target.id
    })
  }

  isSelected = (index) => {
    return index === parseInt(this.state.selected) ? true : false
  };

  render() {
    return (
      <div className="row">
        <div className="col-xs-12 col-sm-6 example-col">
          <ButtonGroup>
            <Button togglable={true} id={1} selected={this.isSelected(1)} onClick={this.groupButtonClick}>
              Bold
                     </Button>
            <Button togglable={true} id={2} selected={this.isSelected(2)} onClick={this.groupButtonClick}>
              Italic
                     </Button>
            <Button togglable={true} id={3} selected={this.isSelected(3)} onClick={this.groupButtonClick}>
              Underline
                     </Button>
          </ButtonGroup >
        </div>
      </div>
    )
  }
}
ReactDOM.render(
  <ButtonGroupContainer />,
  document.querySelector('my-app')
);