"use strict";

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/es6.object.assign");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

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

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

/**
 * @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.default.createElement(_.CompositeAvatar, null, _react.default.createElement(_.Avatar, {
          title: attendees[0].title,
          alt: attendees[0].alt,
          src: attendees[0].src
        }), _react.default.createElement(_.Avatar, {
          title: attendees[1].title,
          alt: attendees[1].alt,
          src: attendees[1].src
        }));
      } else if (attendees.length === 1) {
        return _react.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.');
      }
    }
  };

  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.default.createElement("div", _extends({
    className: "cui-alert cui-alert--meeting"
  }, onClick && {
    onClick: onClick,
    onKeyDown: function onKeyDown(e) {
      return handleKeyDown(e);
    },
    role: 'button'
  }), renderAvatar(), _react.default.createElement("div", {
    className: 'cui-alert__content' + ("" + (onSnooze ? '' : ' cui-alert__content--wide'))
  }, _react.default.createElement("div", {
    className: "cui-alert__title",
    title: title
  }, title), _react.default.createElement("div", {
    className: "cui-alert__status"
  }, status), _react.default.createElement("div", {
    className: "cui-alert__message",
    title: message
  }, message)), onSnooze && _react.default.createElement("div", {
    className: "cui-alert__button"
  }, _react.default.createElement(_.Button, {
    children: _react.default.createElement(_.Icon, {
      name: "alarm_16"
    }),
    onClick: onSnooze,
    ariaLabel: remindAriaLabel,
    circle: true,
    size: 44
  })), _react.default.createElement("div", {
    className: "cui-alert__button"
  }, _react.default.createElement(_.Button, {
    children: _react.default.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.default.node,

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

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

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

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

  /** @prop Optional callback function invoked when the snooze button is clicked | null */
  onSnooze: _propTypes.default.func,

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

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

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

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

  /** @prop Optional AlertMeeting title | '' */
  title: _propTypes.default.string
};
AlertMeeting.displayName = 'AlertMeeting';
var _default = AlertMeeting;
/**
* @component alert
* @section default
* @react

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

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

**/

/**
* @component alert
* @section multiple
* @react

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

  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 (
      <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>
        <AlertMeetingContainer
          alertList={this.state.alertList}
        />
      </div>
    );
  }
}

**/

exports.default = _default;