import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import StyleButton from './StyleButton';

class BlockStyleControls extends PureComponent {
  render() {
    const { editorState, controls = [] } = this.props;
    const selection = editorState.getSelection();
    const blockType = editorState
      .getCurrentContent()
      .getBlockForKey(selection.getStartKey())
      .getType();
    const { _mountOrder, _rootNodeID } = this._reactInternalInstance;
    let i = 0;
    return (
      <div className="rich-text-editor--controls-section">
        {controls.map(type => {
          i += 1;
          return (<StyleButton
            key={`Block${i}_${_rootNodeID}-${_mountOrder}`}
            active={type.style === blockType}
            label={type.label}
            onToggle={this.props.onToggle}
            style={type.style}
            className={type.className}
          />);
        }
        )}
      </div>
    );
  }
}


BlockStyleControls.propTypes = {
  editorState: PropTypes.object,
  onToggle: PropTypes.func,
  controls: PropTypes.array
};

BlockStyleControls.defaultProps = {
  editorState: null,
  onToggle: null,
  controls: null
};

export default BlockStyleControls;
