import React from 'react';
import PropTypes from 'prop-types';
import './button.css';
import './color.css';

/**
 * Primary UI component for user interaction
 */
export const Button = ({ text, size = 'medium', color = 'primary', plain = false, type = 'button', disabled = false, onClick, ...props }) => {
  color = (['primary', 'warning', 'danger', 'success', 'info'].includes(color)) ? color : 'primary';
  size = (['small', 'medium', 'large'].includes(size)) ? size : 'medium';
  const mode = disabled
    ? (plain ? `craft-button--disabled craft-button--plain__${color}__disabled` : `craft-button--disabled craft-button--default__${color}__disabled`)
    : (plain ? `craft-button--plain__${color}` : `craft-button--default__${color}`);
    return (
    <>
      {
        type === 'text'
          ? <span
            className={`craft-button--${size} ${disabled ? 'craft-text__' + color + '__disabled' : 'craft-text__' + color}`}
            {...props}
            onClick={disabled ? null : onClick}
          >
            {text}
          </span>
          : <button
            type="button"
            className={['craft-button', `craft-button--${size}`, mode].join(' ')}
            {...props}
            onClick={disabled ? null : onClick}
          >
            {text}
          </button>
      }
    </>
  );
};

Button.propTypes = {
  /**
   * Is plain?
   */
  plain: PropTypes.bool,
  /**
   * Button contents
   */
  text: PropTypes.string.isRequired,
  /**
   * How large should the button be?
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * What color to use
   */
  color: PropTypes.oneOf(['primary', 'warning', 'danger', 'success', 'info']),
  /**
   * How type should the button be?
   */
  type: PropTypes.oneOf(['button', 'text']),
  /**
   * Is disable?
   */
  disabled: PropTypes.bool,
  /**
   * Optional click handler
   */
  onClick: PropTypes.func,
};

Button.defaultProps = {
  text: 'button',
  size: 'medium',
  color: 'primary',
  type: 'button',
  plain: false,
  disabled: false,
  onClick: undefined,
};