import "core-js/modules/es6.object.assign";

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

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

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

  var renderAvatar = function renderAvatar() {
    if (avatar) {
      return avatar;
    } else {
      if (attendees.length >= 2) {
        return React.createElement(CompositeAvatar, null, React.createElement(Avatar, {
          title: attendees[0].title,
          alt: attendees[0].alt,
          src: attendees[0].src
        }), React.createElement(Avatar, {
          title: attendees[1].title,
          alt: attendees[1].alt,
          src: attendees[1].src
        }));
      } else if (attendees.length === 1) {
        return React.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.');
      }
    }
  };

  var handleKeyDown = function handleKeyDown(e) {
    if (e.which === 32 || e.which === 13 || e.charCode === 32 || e.charCode === 13) {
      onClick && onClick(e);
      e.preventDefault();
    }
  };

  return show && React.createElement("div", _extends({
    className: "cui-alert cui-alert--meeting"
  }, onClick && {
    onClick: onClick,
    onKeyDown: function onKeyDown(e) {
      return handleKeyDown(e);
    },
    role: 'button'
  }), renderAvatar(), React.createElement("div", {
    className: 'cui-alert__content' + ("" + (onSnooze ? '' : ' cui-alert__content--wide'))
  }, React.createElement("div", {
    className: "cui-alert__title",
    title: title
  }, title), React.createElement("div", {
    className: "cui-alert__status"
  }, status), React.createElement("div", {
    className: "cui-alert__message",
    title: message
  }, message)), onSnooze && React.createElement("div", {
    className: "cui-alert__button"
  }, React.createElement(Button, {
    children: React.createElement(Icon, {
      name: "alarm_16"
    }),
    onClick: onSnooze,
    ariaLabel: remindAriaLabel,
    circle: true,
    size: 44
  })), React.createElement("div", {
    className: "cui-alert__button"
  }, React.createElement(Button, {
    children: React.createElement(Icon, {
      name: "cancel_16"
    }),
    onClick: onHide,
    ariaLabel: closeAriaLabel,
    circle: true,
    size: 44
  })));
};

AlertMeeting.defaultProps = {
  attendees: [],
  avatar: null,
  closeAriaLabel: 'close',
  message: '',
  onClick: null,
  onHide: null,
  onSnooze: null,
  remindAriaLabel: 'snooze',
  status: '',
  title: ''
};
AlertMeeting.propTypes = {
  /** @prop Optional avatar prop | null */
  avatar: PropTypes.node,

  /** @prop Optional attendee array. If more than one attendee, a Composite Avatar with only the first 2 attendees is created. | null */
  attendees: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string.isRequired,
    alt: PropTypes.string,
    src: PropTypes.string
  })),

  /** @prop Optional aria label for the close button | 'close' */
  closeAriaLabel: PropTypes.string,

  /** @prop Optional callback function invoked on click of alert | null */
  onClick: PropTypes.func,

  /** @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 Optional callback function invoked when the snooze button is clicked | null */
  onSnooze: PropTypes.func,

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

  /** @prop Optional aria label for snooze buton | 'snooze' */
  remindAriaLabel: PropTypes.string,

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

  /** @prop Optional AlertMeeting status | '' */
  status: PropTypes.string,

  /** @prop Optional AlertMeeting title | '' */
  title: PropTypes.string
};
AlertMeeting.displayName = 'AlertMeeting';
export 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,
  AlertMeetingContainer
} from '@collab-ui/react';
import {
  uniqueId,
  reject
} from 'lodash';

export default class Default extends React.PureComponent {
  state = {
    alertList: []
  }

  handleOnHide = key => {
    console.log(`onHide ${key}`);
    this.setState(state => {
      return { alertList: reject(state.alertList, {key}) };
    });
  }

  handleOnSnooze = key => {
    console.log(`onSnooze ${key}`);
    this.setState(state => {
      return { alertList: reject(state.alertList, {key}) };
    });
  }

  renderSingleAttendeeMeeting = () => {
    const key = uniqueId('meeting_alert_');
    return (
      <AlertMeeting
        key={key}
        title='Important Meeting'
        status='In 5 mins.'
        message='This is important'
        onHide={() => this.handleOnHide(key)}
        onSnooze={() => this.handleOnSnooze(key)}
        attendees={[{title: 'J $'}]}
        show
      />
    );
  }

  renderMultipleAttendeeMeeting = () => {
    const key = uniqueId('meeting_alert_');
    return (
      <AlertMeeting
        key={key}
        title='Important Meeting'
        status='In 5 mins.'
        message='This is important'
        onHide={() => this.handleOnHide(key)}
        onSnooze={() => this.handleOnSnooze(key)}
        attendees={[{title: 'J $'}, {title: 'Jefe Guadelupe'}]}
        show
      />
    );
  }

  render() {
    return (
      <section>
        <div>
          <div className='row'>
            <Button
              ariaLabel='Click to Open'
              onClick={() => {
                this.setState(state => ({
                  alertList: [...state.alertList, this.renderSingleAttendeeMeeting()]
                }));
              }}
              children='Single Attendee'
              color='primary'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => {
                this.setState(state => ({
                  alertList: [...state.alertList, this.renderMultipleAttendeeMeeting()]
                }));
              }}
              children='Multiple Attendees'
              color='primary'
            />
          </div>
          <br />
          <AlertMeetingContainer
            alertList={this.state.alertList}
          />
        </div>
      </section>
    );
  }
}

**/