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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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; }

import React from 'react';
import PropTypes from 'prop-types';
import { Button, Icon } from "./..";
/**
 * @category communication
 * @component alert
 * @variations collab-ui-react
 */

var Alert = function Alert(props) {
  var closable = props.closable,
      message = props.message,
      onHide = props.onHide,
      show = props.show,
      title = props.title,
      type = props.type,
      otherProps = _objectWithoutPropertiesLoose(props, ["closable", "message", "onHide", "show", "title", "type"]);

  return show && React.createElement("div", {
    className: "cui-alert cui-alert--" + type
  }, React.createElement("div", {
    className: "cui-alert__icon"
  }), React.createElement("div", {
    className: 'cui-alert__content'
  }, React.createElement("div", {
    className: "cui-alert__title"
  }, title), React.createElement("div", {
    className: "cui-alert__message"
  }, message)), closable && React.createElement("div", {
    className: "cui-alert__button"
  }, React.createElement(Button, _extends({
    circle: true,
    onClick: onHide,
    size: 44
  }, otherProps), React.createElement(Icon, {
    name: "cancel_16"
  }))));
};

Alert.defaultProps = {
  closable: false,
  message: '',
  onHide: null,
  title: '',
  type: 'info'
};
Alert.propTypes = {
  /** @prop To show/hide Close button of the Alert | false */
  closable: PropTypes.bool,

  /** @prop Optional Alert message | '' */
  message: PropTypes.string,

  /** @prop Mandatory handler invoked when the user presses on the Alert's close button or hit's the esc key | null */
  onHide: PropTypes.func,

  /** @prop Set Alert visibility */
  show: PropTypes.bool.isRequired,

  /** @prop Optional Alert title | '' */
  title: PropTypes.string,

  /** @prop Sets the type of the Alert | 'info' */
  type: PropTypes.oneOf(['info', 'success', 'warning', 'error'])
};
Alert.displayName = 'Alert';
export default Alert;
/**
* @component alert
* @section default
*
* @react

import {
  Alert,
  AlertContainer,
  Button
} from '@collab-ui/react';

export default class AlertDefault extends React.PureComponent {
  state = {
    alertMessage: 'Who\'s awesome?  You are!'
  }

  render() {
    let alertContainer;
    return (
      <section>
        <div>
          <div className='row'>
            <Button
              ariaLabel='Click to Open'
              onClick={() => alertContainer.info(
                'Alert',
                this.state.alertMessage,
                () => console.log('onHide info'),
                { ariaLabel: 'Close Alert' }
              )}
              children='Info/Default'
              color='primary'
            />
          </div>
        </div>
        <br />
        <AlertContainer
          ref={ref => alertContainer = ref}
          orderNewest={false}
        />
      </section>
    );
  }
}

**/

/**
* @component alert
* @section success
*
* @react

import {
  Alert,
  AlertContainer,
  Button
} from '@collab-ui/react';

export default class AlertSuccess extends React.PureComponent {
  state = {
    alertMessage: 'Who\'s awesome?  You are!'
  }

  render() {
    let alertContainer;
    return (
      <section>
        <div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => alertContainer.success(
                'Alert',
                this.state.alertMessage,
                () => console.log('onHide info'),
                { ariaLabel: 'Close Alert' }
              )}
              children='Success'
              color='primary'
            />
          </div>
        </div>
        <br />
        <AlertContainer
          ref={ref => alertContainer = ref}
          orderNewest={false}
        />
      </section>
    );
  }
}

**/

/**
* @component alert
* @section warning
*
* @react

import {
  Alert,
  AlertContainer,
  Button
} from '@collab-ui/react';

export default class AlertWarning extends React.PureComponent {
  state = {
    alertMessage: 'Who\'s awesome?  You are!'
  }

  render() {
    let alertContainer;
    return (
      <section>
        <div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => alertContainer.warning(
                'Alert',
                this.state.alertMessage,
                () => console.log('onHide info'),
                { ariaLabel: 'Close Alert' }
              )}
              children='Warning'
              color='primary'
            />
          </div>
        </div>
        <br />
        <AlertContainer
          ref={ref => alertContainer = ref}
          orderNewest={false}
        />
      </section>
    );
  }
}

**/

/**
* @component alert
* @section error
*
* @react

import {
  Alert,
  AlertContainer,
  Button
} from '@collab-ui/react';

export default class AlertError extends React.PureComponent {
  state = {
    alertMessage: 'Who\'s awesome?  You are!'
  }

  render() {
    let alertContainer;
    return (
      <section>
        <div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => alertContainer.error(
                'Alert',
                this.state.alertMessage,
                () => console.log('onHide info'),
                { ariaLabel: 'Close Alert' }
              )}
              children='Error'
              color='primary'
            />
          </div>
        </div>
        <br />
        <AlertContainer
          ref={ref => alertContainer = ref}
          orderNewest={false}
        />
      </section>
    );
  }
}

**/