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}
        form={this.props.form}
        disabled={this.props.disabled}
        onClick={this.props.onClick}
        className={classNames(
          'rounded-md focus:outline-none',
          this.getColorClass(),
          { 'hover:font-semibold hover:shadow-lg': !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,
  form: PropTypes.string,
  onClick: PropTypes.func,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  disabled: PropTypes.bool.isRequired,
  className: PropTypes.string
};

export default OutlineButton;
