import * as React from "react";

export interface IButtonProps {
  buttonType?: string;
  className?: string;
  id?: string;
  text: string;
  title: string;
  type?: string;
  disabled?: boolean;
  onClick?: any;
  iconLeft?: JSX.Element;
  iconRight?: JSX.Element;
  hideText?: boolean;
}

class Button extends React.Component<IButtonProps, {}> {
  constructor(props: any) {
    super(props);
  }
  public render() {
    let className: string = "button";
    if (this.props.className) {
      className += " " + this.props.className;
    }
    const iconLeft: JSX.Element | null = this.props.iconLeft ? (
      <span className="buttonIcon buttonIconLeft">{this.props.iconLeft}</span>
    ) : null;
    const iconRight: JSX.Element | null = this.props.iconRight ? (
      <span className="buttonIcon buttonIconRight">{this.props.iconRight}</span>
    ) : null;
    let text: JSX.Element | null = (
      <span className="buttonText">{this.props.text}</span>
    );
    if (this.props.hideText) {
      text = null;
    }
    return (
      <button
        type={this.props.buttonType ? this.props.buttonType : "button"}
        className={className}
        id={this.props.id}
        onClick={this.props.onClick}
        title={this.props.title}
        disabled={this.props.disabled}
      >
        {iconLeft}
        {text}
        {iconRight}
      </button>
    );
  }
}

export default Button;