'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 meeting-alert
 * @variations collab-ui-react
 */

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

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

var AlertMeeting = function AlertMeeting(props) {
  var attendees = props.attendees,
      show = props.show,
      onHide = props.onHide,
      onSnooze = props.onSnooze,
      title = props.title,
      message = props.message,
      status = props.status;


  var renderAvatar = function renderAvatar() {
    if (attendees.length >= 2) {
      return _react2.default.createElement(
        _.CompositeAvatar,
        null,
        _react2.default.createElement(_.Avatar, {
          title: attendees[0].title,
          alt: attendees[0].alt,
          src: attendees[0].src
        }),
        _react2.default.createElement(_.Avatar, {
          title: attendees[1].title,
          alt: attendees[1].alt,
          src: attendees[1].src
        })
      );
    } else if (attendees.length === 1) {
      return _react2.default.createElement(_.Avatar, {
        title: attendees[0].title,
        alt: attendees[0].alt,
        src: attendees[0].src
      });
    } else {
      throw new Error('MeetingAlert needs at least one attendee to render an avatar.');
    }
  };

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

AlertMeeting.defaultProps = {
  attendees: [],
  title: '',
  status: '',
  message: '',
  onHide: null,
  onSnooze: null
};

AlertMeeting.displayName = 'AlertMeeting';

exports.default = AlertMeeting;

/**
* @name Meeting
* @description Control the avatar type by passing in an array of user data in the attendees prop.
*
* @category communication
* @component alert
* @section meeting
*
* @js

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

export default class Default extends React.PureComponent {
  state = {
    showAlert: false,
    attendees: []
  }

  render() {
    return (
      <section>
        <div>
          <div className='row'>
            <Button
              ariaLabel='Click to Open'
              onClick={() => this.setState({ showAlert: true, attendees: [{title: 'J $'}] })}
              children='Single Attendee'
              color='primary'
              size='large'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => this.setState({ showAlert: true, attendees: [{title: 'J $'}, {title: 'J G'}] })}
              children='Multiple Attendees'
              color='primary'
              size='large'
            />
          </div>
          <br />
          <AlertMeeting
            attendees={this.state.attendees}
            show={this.state.showAlert}
            onHide={() => this.setState({ showAlert: false })}
            title='Super Important Meeting'
            status='In 5 minutes'
            message='This meeting will blow your mind!'
          />
        </div>
      </section>
    );
  }
}

**/

module.exports = exports['default'];