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

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

    return classNames(
      {
        [textColorWeight ? `text-${textColor}-${textColorWeight}` : `text-${textColor}`]: textColor
      },
      { 'text-white': !textColor },
      { 'opacity-40 cursor-not-allowed': disabled },
      withoutWeightColor.includes(color) ? `bg-${color}` : `bg-${color}-${colorWeight}`,
      {
        [`hover:bg-${color}-${colorWeight + 100}`]: !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>
    );
  }
}

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

FilledButton.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)]),
  loading: PropTypes.bool.isRequired,
  disabled: PropTypes.bool.isRequired,
  className: PropTypes.string
};

export default FilledButton;
