import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import './button.scss';


const propTypes = {
  /** @ignore */
  children: PropTypes.node,
  /** @ignore */
  className: PropTypes.string,
  /** @ignore */
  onClick: PropTypes.func,
  /** @ignore */
  disabled: PropTypes.bool,
  /** A component, button, a, react router Link, etc... */
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ]),
  /** props passed to child component */
  childProps: PropTypes.object,
  /** small, medium, large */
  size: PropTypes.oneOf(['sm', 'md', 'lg', 'nav-bar', 'nav-bar-level-2']),
  /** primary, info */
  variant: PropTypes.oneOf([
    'primary', 'cancel', 'info', 'alert', 'warning', 'dash-lagoon', 'icon', 'dash-night-blue',
    'tab', 'button-collapsible-card'
  ]),
  state: PropTypes.oneOf(['opened', 'dropdown-opened', 'dropdown-closed']),
  active: PropTypes.bool
};

const defaultProps = {
  children: undefined,
  className: undefined,
  disabled: false,
  onClick: null,
  component: 'button',
  childProps: {},
  size: 'md',
  variant: 'primary',
  state: null,
  active: undefined
};

/**
 * A generic button
 */
const Button = props => {
  const {
    children, className, size, variant, state, onClick, disabled, component: MyComponent, active, childProps,
    ...rest
  } = props;

  const onDisabledLink = e => {
    if (disabled) {
      e.preventDefault();
    } else if (onClick) {
      onClick(e);
    }
  };

  return (
    <MyComponent
      className={className}
      styleName={classNames('base', variant, size, {
        disabled,
        [`state-${state}`]: state,
        'state-opened': active
      })}
      onClick={onDisabledLink}
      disabled={disabled}
      {...childProps}
      {...rest}
    >
      <span styleName="content">{children}</span>
    </MyComponent>
  );
};


Button.propTypes = propTypes;
Button.defaultProps = defaultProps;
Button.componentName = 'Button';

export default Button;
