import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import contrast from 'contrast';
import Icon from './icon';

export default class PaperActionButtonOption extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  
(e) {
    this.props.onClick(e);
    this.props.__close();
  }

  render() {
    const {
      label,
      color,
      __badgeStyle,
      __labelStyle,
      onClick,
      iconName,
      __close,
      ...props
    } = this.props;
    const bgColorShade = color ? contrast(color) : 'light';

    return (
      <div className="paper-action-button__option" {...props}>
        <label style={__labelStyle} className="paper-action-button__label">
          {label}
        </label>
        <button
          className={classNames(
            'paper-action-button__option-button',
            `paper-action-button__option-button--${bgColorShade === 'light' ? 'light' : 'dark'}`
          )}
          style={{ backgroundColor: color, ...__badgeStyle }}
          onClick={this.handleClick}
          onMouseUp={() => this.myRef.blur()}
          ref={myRef => {
            this.myRef = myRef;
          }}
        >
          <Icon>{iconName}</Icon>
        </button>
      </div>
    );
  }
}

PaperActionButtonOption.defaultProps = {
  onClick: () => {},
  __close: () => {}
};

PaperActionButtonOption.propTypes = {
  __badgeStyle: PropTypes.object,
  color: PropTypes.string,
  iconName: PropTypes.string.isRequired,
  __labelStyle: PropTypes.object,
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  __close: PropTypes.func
};

handleClick