import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.keys";
import "core-js/modules/es6.object.assign";
import "core-js/modules/es7.array.includes";
import "core-js/modules/es6.string.includes";

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { Loading } from "./..";
/**
 * @category controls
 * @component button
 * @variations collab-ui-react
 */

var Button =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Button, _React$Component);

  function Button() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.handleKeyDown = function (e) {
      var _this$props = _this.props,
          onClick = _this$props.onClick,
          index = _this$props.index;
      var _this$context = _this.context,
          handleKeyDown = _this$context.handleKeyDown,
          handleClick = _this$context.handleClick;

      if (e.which === 32 || e.which === 13 || e.charCode === 32 || e.charCode === 13) {
        handleClick && handleClick(e, index);
        onClick && onClick(e);
        e.preventDefault();
      } else {
        handleKeyDown && handleKeyDown(e, index);
      }
    };

    _this.handleClick = function (e, onClick) {
      var handleClick = _this.context.handleClick;
      var index = _this.props.index;
      onClick && onClick(e);
      handleClick && handleClick(e, index);
    };

    return _this;
  }

  var _proto = Button.prototype;

  _proto.componentDidMount = function componentDidMount() {
    /* eslint-disable no-console */
    var _this$props2 = this.props,
        ariaLabel = _this$props2.ariaLabel,
        ariaLabelledBy = _this$props2.ariaLabelledBy,
        index = _this$props2.index;
    var _this$context2 = this.context,
        focusIndex = _this$context2.focusIndex,
        focusOnLoad = _this$context2.focusOnLoad;
    !ariaLabel && !ariaLabelledBy && console.warn('[@collab-ui/react] Button: Accessibility could be improved with ariaLabel');
    focusOnLoad && focusIndex === index && this.refs.button.focus();
    /* eslint-enable no-console */
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState, prevContext) {
    var focusIndex = this.context.focusIndex;
    var index = this.props.index;
    typeof index === 'number' && index !== prevContext.focusIndex && index === focusIndex && this.refs.button.focus();
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props3 = this.props,
        active = _this$props3.active,
        ariaLabel = _this$props3.ariaLabel,
        ariaLabelledBy = _this$props3.ariaLabelledBy,
        children = _this$props3.children,
        circle = _this$props3.circle,
        className = _this$props3.className,
        color = _this$props3.color,
        containerLarge = _this$props3.containerLarge,
        disabled = _this$props3.disabled,
        expand = _this$props3.expand,
        href = _this$props3.href,
        index = _this$props3.index,
        label = _this$props3.label,
        loading = _this$props3.loading,
        large = _this$props3.large,
        _onClick = _this$props3.onClick,
        removeStyle = _this$props3.removeStyle,
        size = _this$props3.size,
        style = _this$props3.style,
        tag = _this$props3.tag,
        type = _this$props3.type,
        otherHTMLProps = _objectWithoutPropertiesLoose(_this$props3, ["active", "ariaLabel", "ariaLabelledBy", "children", "circle", "className", "color", "containerLarge", "disabled", "expand", "href", "index", "label", "loading", "large", "onClick", "removeStyle", "size", "style", "tag", "type"]);

    var focusIndex = this.context.focusIndex;

    var getChildren = function getChildren() {
      return [loading && React.createElement("div", {
        key: "child-0"
      }, React.createElement(Loading, null)), React.createElement("span", {
        className: "cui-button__children",
        style: {
          opacity: "" + (loading ? 0 : 1)
        },
        key: "child-1"
      }, children)];
    };

    var getColor = function getColor() {
      if (removeStyle) return false;
      return color === 'none' ? 'color-none' : color;
    }; // Method for deprecated large prop


    var getSize = function getSize() {
      if (removeStyle) return false;
      /* eslint-disable no-console */

      var validButtonSize = checkButtonSize();

      if (!circle && !validButtonSize) {
        console.warn('[@collab-ui/react] Button: selected size is not supported for non-circular button. Size will default to 36');
        return '36';
      } else if (large) {
        console.warn('[@collab-ui/react] Button: large prop is deprecated and will be removed. Please use size prop.');
        return !circle ? '52' : '44';
      } else {
        return size === 'none' ? 'size-none' : size;
      }
      /* eslint-enable no-console */

    };

    var checkButtonSize = function checkButtonSize() {
      return ['none', '28', '36', '40', '52', 28, 36, 40, 52].includes(size);
    };

    var button = React.createElement(tag, Object.assign({
      ref: 'button',
      className: 'cui-button' + ("" + (circle && " cui-button--circle" || '')) + ("" + (getSize() && " cui-button--" + getSize() || '')) + ("" + (expand && " cui-button--expand" || '')) + ("" + (color && " cui-button--" + getColor() || '')) + ("" + (removeStyle && ' cui-button--none' || '')) + ("" + (active && !disabled && " active" || '')) + ("" + (className && " " + className || '')),
      onClick: function onClick(e) {
        return _this2.handleClick(e, _onClick);
      },
      onKeyDown: this.handleKeyDown,
      style: style,
      disabled: disabled || loading,
      alt: ariaLabel || label,
      href: tag === 'a' && href || undefined,
      type: tag !== 'a' && type || ''
    }, ariaLabel ? {
      'aria-label': ariaLabel
    } : {
      'aria-labelledby': ariaLabelledBy
    }, {
      tabIndex: typeof index !== 'number' || index === focusIndex ? 0 : -1
    }, tag && tag !== 'button' && {
      role: 'button'
    }, otherHTMLProps), getChildren());
    return label ? React.createElement("div", {
      className: "cui-button__container" + (containerLarge ? '' : '--small')
    }, button, React.createElement("div", {
      className: "cui-button__label"
    }, label)) : button;
  };

  return Button;
}(React.Component);

Button.displayName = 'Button';
Button.contextTypes = {
  focusIndex: PropTypes.number,
  focusOnLoad: PropTypes.bool,
  handleClick: PropTypes.func,
  handleKeyDown: PropTypes.func
};
Button.propTypes = {
  /** @prop Sets active css styling | false */
  active: PropTypes.bool,

  /** @prop Text to display for blindness accessibility features | '' */
  ariaLabel: PropTypes.string,

  /** @prop ID to reference for blindness accessibility feature | '' */
  ariaLabelledBy: PropTypes.string,

  /** @prop Children Nodes to Render inside Button | null */
  children: PropTypes.node.isRequired,

  /** @prop Sets circle css styling | false */
  circle: PropTypes.bool,

  /** @prop Optional css class string | '' */
  className: PropTypes.string,

  /** @prop Sets optional Button color | '' */
  color: PropTypes.string,

  /** @prop Sets containerLarge css styling | false */
  containerLarge: PropTypes.bool,

  /** @prop Sets the attribute disabled to Button | false */
  disabled: PropTypes.bool,

  /** @prop Sets expand css styling to widen the Button | false */
  expand: PropTypes.bool,

  /** @prop Href prop changes element to anchor element | '' */
  href: PropTypes.string,

  /** @prop This index is used to control focus of Button within a ButtonGroup | null */
  index: PropTypes.number,

  /** @prop Text to display inside the button | '' */
  label: PropTypes.string,

  /** @prop Depreciated large css styling, use size instead | false */
  large: PropTypes.bool,

  /** @prop Activates the loading animation and sets the button to disabled | false */
  loading: PropTypes.bool,

  /** @prop Handler to be called when the user taps the button | null */
  onClick: PropTypes.func,

  /** @prop Optional prop to remove Button's default style | false */
  removeStyle: PropTypes.bool,

  /** @prop Optional string or number size prop | 36 */
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** @prop Additional css styling applied to the button | {} */
  style: PropTypes.object,

  /** @prop Optional tag to define type of element | 'button' */
  tag: PropTypes.oneOf(['button', 'input', 'a']),

  /** @prop Optional html type | 'button' */
  type: PropTypes.oneOf(['button', 'reset', 'submit'])
};
Button.defaultProps = {
  active: false,
  ariaLabel: '',
  ariaLabelledBy: '',
  children: null,
  circle: false,
  className: '',
  color: '',
  containerLarge: false,
  disabled: false,
  expand: false,
  href: '',
  index: null,
  label: '',
  large: false,
  loading: false,
  onClick: null,
  removeStyle: false,
  size: 36,
  style: {},
  tag: 'button',
  type: 'button'
};
export default Button;
/**
* @name Default Buttons
*
* @category controls
* @component button
* @section default
*
* @js

export default function ButtonDefault() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          ariaLabel='For the Win'
        />
      </div>
    </div>
  );
}

**/

/**
* @name Button Color
* @description Create colored buttons by passing in the color prop.
*
* @category controls
* @component button
* @section color
*
* @js

export default function ButtonDefault() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>

        <div>color=(blue)</div>
        <div>
          <Button
            ariaLabel='For the Win'
            color='blue'
          >
            Test Me
          </Button>
        </div>
        <br />

        <div>color=(none)</div>
        <div>
          <Button
            ariaLabel='For the Win'
            color='none'
          >
            Test Me
          </Button>
        </div>
        <br />
      </div>
    </div>
  );
}

**/

/**
* @name Button Sizes
* @description Create large buttons by passing in the <code>large</code> prop.
*
* @category controls
* @component button
* @section large
*
* @js
*
export default function ButtonDefault() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className="example-spacing">

        <div>size=(none)</div>
        <div>
          <Button
            ariaLabel='For the Win'
            size='none'
          >
            Test Me
          </Button>
        </div>
        <br />

        <div>size=(28)</div>
        <div>
          <Button
            ariaLabel='For the Win'
            size={28}
          >
            Test Me
          </Button>
        </div>
        <br />

        <div>Default size=(36)</div>
        <div>
          <Button
            ariaLabel='For the Win'
          >
            Test Me
          </Button>
        </div>
        <br />

        <div>size=(40)</div>
        <div>
          <Button
            ariaLabel='For the Win'
            size={40}
          >
            Test Me
          </Button>
        </div>
        <br />


        <div>size=(52)</div>
        <div>
          <Button
            ariaLabel='For the Win'
            size={52}
          >
            Test Me
          </Button>
        </div>
        <br />

      </div>
    </div>
  );
}
*/

/**
* @name Button Tags
* @description Button with Tag
*
* @category controls
* @component button
* @section tags
*
*
* @js
export default function ButtonTags() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div>Tag Attribute (a)</div>
      <div className='columns small-3'>
        <Button
          children='Link'
          onClick={() => {}}
          ariaLabel='For the Win'
          tag='a'
        />
      </div>
    </div>
  );
}
**/

/**
* @name Button with Color
* @description Button with Color
*
* @category controls
* @component button
* @section colors
*
*
* @js
export default function ButtonColors() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div>Color Attribute</div>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          onClick={() => {}}
          ariaLabel='For the Win'
          color='blue'
        />
      </div>
    </div>
  );
}
**/

/**
* @name Expanded Buttons
* @description Create block level buttons —those that span the full width of a parent— by passing in the <code>expand</code> prop.
*
* @category controls
* @component button
* @section expanded
*
*
* @js

export default function ButtonExpanded() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          onClick={() => {}}
          ariaLabel='For the Win'
          expand
        />
      </div>
    </div>
  );
}
**/

/**
* @name Disabled Buttons
* @description Create large buttons by passing in the <code>disabled</code> prop.
*
* @category controls
* @component button
* @section disabled
*
*
* @js

export default function ButtonDisabled() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
    <div className='columns small-3'>
      <Button
        children='Test Me'
        onClick={() => {}}
        ariaLabel='For the Win'
        disabled
      />
    </div>
    </div>
  );
}
**/

/**
* @name Loading Buttons
* @description Create loading buttons by passing in the <code>loading</code> prop.
*
* @category controls
* @component button
* @section loading
*
*
* @js

export default function ButtonLoading() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          onClick={() => {}}
          ariaLabel='For the Win'
          loading
        />
      </div>
    </div>
  );
}
**/

/**
* @name Button with circle
* @description Button with circle, default is small
*
* @category controls
* @component button
* @section circle
*
*
* @js
import { Icon } from '@collab-ui/react';

export default function ButtonShape() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children={<Icon name='icon-search_12' />}
          onClick={() => {}}
          ariaLabel='For the Win'
          circle
        />
      </div>
    </div>
  );
}
**/

/**
* @name Circular Buttons
* @description Create circular buttons by passing in the <code>circle</code> prop.
*
* @category controls
* @component button
* @section circle
*
*
* @js
import { Icon } from '@collab-ui/react';

export default function ButtonLargeCircle() {
  return(
    <div>
      <div className='row' style={{marginBottom: '1rem'}}>
        <div className="example-spacing">

          <div>size=(none)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size='none'
            >
              <Icon name='icon-private_8' />
            </Button>
          </div>
          <br />

          <div>size=(20)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size={20}
            >
              <Icon name='icon-private_8' />
            </Button>
          </div>
          <br />

          <div>size=(28)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              color='blue'
              size={28}
            >
              <Icon name='icon-plus_12' color='white' />
            </Button>
          </div>
          <br />

          <div>size=(32)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size={32}
            >
              <Icon name='icon-plus_14' />
            </Button>
          </div>
          <br />


          <div>Default size=(36)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
            >
              <Icon name='icon-plus_14' />
            </Button>
          </div>
          <br />

          <div>size=(40)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size={40}
            >
              <Icon name='icon-plus_14' />
            </Button>
          </div>
          <br />


          <div>size=(44)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size={44}
            >
              <Icon name='icon-arrow-tail-down_14' />
            </Button>
          </div>
          <br />

          <div>size=(56)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size={56}
            >
              <Icon name='icon-arrow-tail-down_20' />
            </Button>
          </div>
          <br />

          <div>size=(68)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size={68}
            >
              <Icon name='icon-arrow-tail-down_28' />
            </Button>
          </div>
          <br />

          <div>size=(72)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size={72}
            >
              <Icon name='icon-active-speaker_32' />
            </Button>
          </div>
          <br />

          <div>size=(84)</div>
          <div>
            <Button
              ariaLabel='For the Win'
              circle
              size={84}
            >
              <Icon name='icon-blocked_36' />
            </Button>
          </div>
          <br />


        </div>
      </div>
    </div>
  );
}
**/