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


class InlineStyleControls extends PureComponent {
  render() {
    const { editorState, controls = [] } = this.props;
    const currentStyle = editorState.getCurrentInlineStyle();
    const { _mountOrder, _rootNodeID } = this._reactInternalInstance;
    let i = 0;
    return (
      <div className="rich-text-editor--controls-section">
        {controls.map(type => {
          i += 1;
          return (<StyleButton
            key={`Inline_${i}${_rootNodeID}-${_mountOrder}`}
            active={currentStyle.has(type.style)}
            label={type.label}
            onToggle={this.props.onToggle}
            style={type.style}
            className={type.className}
          />);
        }
        )}
      </div>
    );
  }
}


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

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

export default InlineStyleControls;
