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

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

class FilledButton extends Component<FilledButtonProps> {
  getColorClass = () => {
    const {
      color = 'blue',
      colorWeight = 500,
      textColor,
      textColorWeight,
      disabled = false
    } = 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
      },
      { [`shadow-lg shadow-${color}-${colorWeight}/80`]: color !== 'transparent' },
      { 'hover:shadow-lg': !disabled && color !== 'transparent' }
    );
  };

  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': !disabled },
          this.props.className
        )}
      >
        {this.props.children}
      </button>
    );
  }
}

export default FilledButton;
