import { Component, ReactNode } from 'react';
import classNames from 'classnames';
import { withoutWeightColor } from './utils';

type OutlineButtonProps = {
  color?: string;
  colorWeight?: number;
  borderWeight?: number;
  textColor?: string;
  textColorWeight?: string;
  type?: 'button' | 'submit' | 'reset';
  onClick?: () => void;
  children?: ReactNode;
  disabled?: boolean;
  className?: string;
};

class OutlineButton extends Component<OutlineButtonProps> {
  getColorClass = () => {
    const {
      color = 'blue',
      colorWeight = 500,
      borderWeight,
      textColor,
      textColorWeight,
      disabled = false
    } = 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() {
    const { type = 'button', disabled = false } = this.props;
    return (
      <button
        type={type}
        disabled={disabled}
        onClick={this.props.onClick}
        className={classNames(
          'focus:outline-none',
          this.getColorClass(),
          { 'hover:font-semibold hover:shadow-lg': !disabled },
          this.props.className
        )}
      >
        {this.props.children}
      </button>
    );
  }
}

export default OutlineButton;
