import React from 'react';
import cn from 'classnames';
import './scss/button.scss';

export default class Button extends React.Component {
  static defaultProps = {
    variant: 'primary',
    disabled: false,
    size: 'medium',
    href: false,
    loading: false,
  }

  constructor(props) {
    super(props);
    this.state = {
      /* variant: props.variant,
      disabled: props.disabled,
      size: props.size,
      href: props.href, */
      loading: false,
    };
  }

  renderLink = () => {
    /* const {  } = this.state; */
    const { children, onClick, style, href, variant, disabled, size } = this.props;
    const buttonClasses = cn({
      'omni-ui-general': true,
      'omni-button': true,
      [`omni-button_${variant}`]: true,
      'omni-button_disabled': !!disabled,
    });

    return (
      <a
        className={buttonClasses}
        href={href}
        onClick={disabled ? null : onClick}
        style={style}
      >
        <span className={`omni-button_${size}`}>
          <span className='omni-button__label'>
            {children}
          </span>
        </span>
      </a>
    );
  }

  renderButton = () => {
    /* const { variant, disabled, size } = this.state; */
    const { children, onClick, style, variant, disabled, size } = this.props;
    const buttonClasses = cn({
      'omni-ui-general': true,
      'omni-button': true,
      [`omni-button_${variant}`]: true,
      'omni-button_disabled': !!disabled,
    });
    return (
      <span
        className={buttonClasses}
        onClick={disabled ? null : onClick}
        style={style}
      >
        <span className={`omni-button_${size}`}>
          <span className='omni-button__label'>
            {children}
          </span>
        </span>
      </span>
    );
  }

  render() {
    const { href } = this.props;
    return !!href ? this.renderLink() : this.renderButton();
  }
}