import {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {withoutWeightColor} from './utils';

class OutlineButton extends Component {
  getColorClass = () => {
    const {color, colorWeight, borderWeight, textColor, textColorWeight, disabled} = this.props;

    return classNames(
      {[textColorWeight ? `text-${textColor}-${textColorWeight}` : `text-${textColor}`]: textColor},
      {[`text-${color}-${colorWeight}`]: !textColor},
      {'opacity-40 cursor-not-allowed': disabled},
      (borderWeight === 1) ? 'border' : `border-${borderWeight}`,
      withoutWeightColor.includes(color) ? `border-${color}` : `border-${color}-${colorWeight}`,
      {[`hover:bg-${color}-50`]: !withoutWeightColor.includes(color) && !disabled}
    );
  };

  render() {
    return (
      <button
        type={this.props.type}
        disabled={this.props.disabled}
        onClick={this.props.onClick}
        className={classNames(
          'focus:outline-none rounded-md',
          this.getColorClass(),
          {'hover:shadow-lg hover:font-semibold': !this.props.disabled},
          this.props.className
        )}
      >
        {this.props.children}
      </button>
    );
  }
}

OutlineButton.defaultProps = {
  type: 'button',
  color: 'blue',
  colorWeight: 500,
  borderWeight: 1,
  loading: false,
  disabled: false
};

OutlineButton.propTypes = {
  color: PropTypes.string.isRequired,
  colorWeight: PropTypes.number.isRequired,
  borderWeight: PropTypes.number.isRequired,
  textColor: PropTypes.string,
  textColorWeight: PropTypes.string,
  type: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  children: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.arrayOf(PropTypes.node)
  ]),
  disabled: PropTypes.bool.isRequired,
  className: PropTypes.string
};

export default OutlineButton;