import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from './Icon';
import ButtonMenu from './Button.Menu';
import ButtonGroup from './Button.Group';
import Spinner from './Spinner';

import '../base';
import styles from './Button.styl';
import menuStyle from './Button.Menu.styl';
import groupStyle from './Button.Group.styl';
import { visualProvided } from './VisualProvider';

function Button({
  t,
  minWidth = true,
  isOffline,
  className,
  children,
  primary,
  icon,
  checked,
  large,
  style,
  disabled,
  onClick,
  type = 'button',
  spinner,
  ...rest
}) {
  const classes = classNames({
    [className]: className,
    [styles.btn]: true,
    [styles.minWidth]: minWidth,
    [menuStyle.btn]: true,
    [groupStyle.btn]: true,
    [styles.secondary]: !primary,
    [styles.checkboxify]: checked !== undefined,
    [styles.checked]: checked,
    [styles.large]: large
  });

  return (
    // eslint-disable-next-line react/button-has-type
    <button
      {...rest}
      className={classes}
      style={style}
      disabled={isOffline() && type === 'submit' ? isOffline() : disabled}
      onClick={onClick}
      type={type}
    >
      {
        icon ? <Icon className={styles.icon} name={icon} /> : null
      }
      { spinner && <Spinner className={styles.spinner} /> }
      {
        spinner ? <div className={styles.childrenWrapper}>{children}</div> : children
      }
      {
        checked === false ? <Icon name="doka-icon-mcheckinactive" /> : null
      }
      {
        checked === true ? <Icon name="doka-icon-mcheckactive" /> : null
      }
    </button>
  );
}

Button.propTypes = {
  children: PropTypes.node,
  primary: PropTypes.bool,
  icon: PropTypes.string,
  checked: PropTypes.bool,
  spinner: PropTypes.bool,
  large: PropTypes.bool,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  type: PropTypes.string
};

Button.defaultProps = {
  children: undefined,
  primary: undefined,
  icon: undefined,
  checked: undefined,
  spinner: undefined,
  large: undefined,
  style: undefined,
  disabled: undefined,
  onClick: undefined,
  type: undefined
};

const Extended = visualProvided(Button);
Extended.Menu = ButtonMenu;
Extended.Group = ButtonGroup;
export default Extended;