'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require('./..');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * @category communication
 * @component alert
 * @variations collab-ui-react
 */

var _ref = _react2.default.createElement('div', { className: 'cui-alert__icon' });

var _ref2 = _react2.default.createElement(_.Icon, { name: 'cancel_16' });

var Alert = function Alert(props) {
  var show = props.show,
      onHide = props.onHide,
      type = props.type,
      closable = props.closable,
      title = props.title,
      message = props.message;


  return show && _react2.default.createElement(
    _.AlertContainer,
    { className: ' cui-alert--' + type },
    _ref,
    _react2.default.createElement(
      'div',
      { className: 'cui-alert__content' },
      _react2.default.createElement(
        'div',
        { className: 'cui-alert__title' },
        title
      ),
      _react2.default.createElement(
        'div',
        { className: 'cui-alert__message' },
        message
      )
    ),
    closable && _react2.default.createElement(
      'div',
      { className: 'cui-alert__button' },
      _react2.default.createElement(_.Button, {
        children: _ref2,
        onClick: onHide,
        ariaLabel: 'close',
        circle: true,
        large: true
      })
    )
  );
};

Alert.defaultProps = {
  title: '',
  message: '',
  type: 'info',
  closable: false,
  onHide: null
};

Alert.displayName = 'Alert';

exports.default = Alert;

/**
* @name Alerts
* @description Create the type of Alert (info, success, warning, or error) by passing in the type prop.
*
* @category communication
* @component alert
* @section default
*
* @js

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

export default class Default extends React.PureComponent {
  state = {
    showAlert: false,
    alertType: 'info'
  }

  render() {
    return (
      <section>
        <div>
          <div className='row'>
            <Button
              ariaLabel='Click to Trigger'
              onClick={() => this.setState({ showAlert: true, alertType: 'info' })}
              children='Info/Default'
              ariaLabel='Open Modal'
              color='primary'
              size='large'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Trigger'
              onClick={() => this.setState({ showAlert: true, alertType: 'success' })}
              children='Success'
              ariaLabel='Open Modal'
              color='primary'
              size='large'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Trigger'
              onClick={() => this.setState({ showAlert: true, alertType: 'warning' })}
              children='Warning'
              ariaLabel='Open Modal'
              color='primary'
              size='large'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Trigger'
              onClick={() => this.setState({ showAlert: true, alertType: 'error' })}
              children='Error'
              ariaLabel='Open Modal'
              color='primary'
              size='large'
            />
          </div>
        </div>
        <br />
        <Alert
          type={this.state.alertType}
          show={this.state.showAlert}
          closable
          onHide={() => this.setState({ showAlert: false })}
          title='Alert'
          message={'I\'m an Alert'}
        />
      </section>
    );
  }
}

**/

module.exports = exports['default'];