import React from "react";
import { connect } from "redux-bundler-react";
import classnames from "classnames";

class SidebarButton extends React.Component {
  constructor(props) {
    super(props);
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler(e) {
    e.preventDefault();
    this.props.onClick(e);
  }

  render() {
    const {
      active,
      iconClass,
      iconStyle,
      iconText,
      expanded,
      label,
      theme,
      title,
      styleOverride,
      onMouseDown,
      onMouseUp,
      themeIconSize,
    } = this.props;

    const btnClass = classnames({
      "cm-nav-btn": true,
      "cm-nav-icon": themeIconSize === "default" ? true : false,
      "cm-nav-icon-lg": themeIconSize === "large" ? true : false,
      "cm-btn-block": true,
      "vertical-toolbar-button": true,
      active: active,
    });
    const txtClass = classnames({
      "overflow-ellipsis": true,
      hidden: !iconText,
    });
    const inlineClass = classnames({
      "icon-inline": expanded,
      hidden: !!iconText,
    });
    const labelClass = classnames({
      hidden: !expanded,
    });
    const style = Object.assign({ textAlign: "left" }, styleOverride);
    return (
      <div
        className={btnClass + " " + theme}
        onClick={this.clickHandler}
        onMouseDown={onMouseDown}
        onMouseUp={onMouseUp}
        style={style}
        title={title}
      >
        <i className={iconClass + " " + inlineClass} style={iconStyle} />
        <span className={txtClass}>{iconText}</span>
        <span className={labelClass}>{label}</span>
      </div>
    );
  }
}

export default connect("selectThemeIconSize", SidebarButton);
