import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.keys";
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); }

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

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { Avatar, Icon, List, ListItem, ListItemSection, Button, Popover } from "./..";
import { omit, uniqueId } from 'lodash';
/**
 * @category containers
 * @component list-item
 * @variations collab-ui-react
 */

var SpaceListMeeting =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(SpaceListMeeting, _React$PureComponent);

  function SpaceListMeeting() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      id: _this.props.id || uniqueId('cui-space-list-meeting-')
    };

    _this.handleButtonClick = function (e) {
      var buttonOnClick = _this.props.buttonOnClick;
      buttonOnClick && buttonOnClick(e);
      e.stopPropagation();
    };

    return _this;
  }

  var _proto = SpaceListMeeting.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        attendees = _this$props.attendees,
        buttonLabel = _this$props.buttonLabel,
        childrenLeft = _this$props.childrenLeft,
        childrenRight = _this$props.childrenRight,
        className = _this$props.className,
        header = _this$props.header,
        isBold = _this$props.isBold,
        meetingType = _this$props.meetingType,
        subheader = _this$props.subheader,
        title = _this$props.title,
        props = _objectWithoutPropertiesLoose(_this$props, ["attendees", "buttonLabel", "childrenLeft", "childrenRight", "className", "header", "isBold", "meetingType", "subheader", "title"]);

    var id = this.state.id;
    var otherProps = omit(Object.assign({}, props), ['buttonOnClick']);
    var getTitle = !title && typeof header === 'string' ? header : title;

    var getLeftSection = function getLeftSection() {
      switch (meetingType) {
        case 'group':
          return React.createElement(Avatar, {
            title: getTitle,
            alt: getTitle,
            type: "group"
          });

        case 'number':
          return React.createElement(Avatar, {
            title: "#",
            alt: getTitle
          });

        case 'device':
          return React.createElement(Avatar, {
            icon: React.createElement(Icon, {
              name: "spark-board_16"
            }),
            alt: getTitle
          });

        default:
          return React.createElement(Avatar, {
            title: getTitle,
            alt: getTitle
          });
      }
    };

    var getPopoverContent = React.createElement(List, null, attendees.map(function (ele, idx) {
      return React.createElement(ListItem, {
        key: "attendee-" + idx
      }, React.createElement(ListItemSection, {
        position: "left"
      }, ele.node ? ele.node : React.createElement(Avatar, {
        size: "small",
        title: ele.title,
        alt: ele.alt || ele.title,
        src: ele.src || '',
        type: "group"
      })), React.createElement(ListItemSection, {
        position: "center"
      }, React.createElement("div", {
        className: "cui-list-item__header"
      }, ele.title)));
    }));
    var children = [React.createElement(ListItemSection, {
      key: "child-0",
      position: "left"
    }, childrenLeft || getLeftSection()), React.createElement(ListItemSection, {
      key: "child-1",
      position: "center"
    }, React.createElement("div", {
      className: "cui-list-item__header"
    }, header), React.createElement("div", {
      className: "cui-list-item__subheader"
    }, subheader)), React.createElement(ListItemSection, {
      key: "child-2",
      position: "right"
    }, childrenRight || attendees.length > 0 && React.createElement(Popover, {
      content: getPopoverContent,
      direction: "bottom-center",
      targetOffset: {
        vertical: 3
      },
      isDynamic: true
    }, React.createElement("span", {
      role: "button",
      tabIndex: 0,
      className: "cui-list-item--space-meeting--attendees"
    }, attendees.length, React.createElement(Icon, {
      name: "people_12"
    }))), buttonLabel && React.createElement(Button, {
      color: "green",
      ariaLabel: buttonLabel,
      children: buttonLabel,
      onClick: this.handleButtonClick,
      size: 28
    }))];
    return React.createElement(ListItem, _extends({
      className: 'cui-list-item--space-meeting' + ("" + (isBold && " cui-list-item--unread" || '')) + ("" + (className && " " + className || '')),
      id: id,
      title: getTitle,
      type: "space"
    }, otherProps), children);
  };

  return SpaceListMeeting;
}(React.PureComponent);

SpaceListMeeting.propTypes = {
  /** @prop Array of Attendee's Data | [] */
  attendees: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string.isRequired,
    alt: PropTypes.string,
    src: PropTypes.string,
    node: PropTypes.element
  })),

  /** @prop Label string for button | '' */
  buttonLabel: PropTypes.string,

  /** @prop Callback function invoked when user clicks on button | null */
  buttonOnClick: PropTypes.func,

  /** @prop Children nodes to render for left section | null */
  childrenLeft: PropTypes.node,

  /** @prop Children nodes to render for right section | null */
  childrenRight: PropTypes.node,

  /** @prop Optional HTML Class string | '' */
  className: PropTypes.string,

  /** @prop ListItem header text | '' */
  header: PropTypes.node.isRequired,

  /** @prop HTML ID for SpaceListMeeting | '' */
  id: PropTypes.string,

  /** @prop Determines if SpaceListMeeting is Bolded | false */
  isBold: PropTypes.bool,

  /** @prop Set the SpaceListMeeting type | '' */
  meetingType: PropTypes.oneOf(['', 'group', 'number', 'device']),

  /** @prop SpaceListMeeting sub header node | '' */
  subheader: PropTypes.node,

  /** @prop SpaceListMeeting title | '' */
  title: PropTypes.string
};
SpaceListMeeting.defaultProps = {
  attendees: [],
  buttonLabel: '',
  buttonOnClick: null,
  childrenLeft: null,
  childrenRight: null,
  className: '',
  id: '',
  isBold: false,
  meetingType: '',
  subheader: '',
  title: ''
};
SpaceListMeeting.displayName = 'SpaceListMeeting';
export default SpaceListMeeting;
/**
* @name Space List Meeting
*
* @category containers
* @component list-item
* @section space-meeting
*
* @js
*
import { List, SpaceListMeeting, Avatar, Icon } from '@collab-ui/react';
import { NavLink } from 'react-router-dom';

export default class SpaceListExamples extends React.PureComponent {

  render() {
    return(
      <div className="medium-5 columns">
        <List style={{backgroundColor: 'rgba(40,40,40,0.72)'}}>
          <SpaceListMeeting 
            buttonLabel='Now'
            attendees={[
              {title: 'Joe Bojangles'},
              {title: 'Joe Boe'},
              {title: 'Joe Coe'},
              {title: 'Joe Doe'},
              {title: 'Joe Foe'},
              {title: 'Joe Goe'},
              {title: 'Joe Joe'},
              {title: 'Joe Koe'},
              {title: 'Joe Loe'},
              {title: 'Joe Moe'},
              {title: 'Joe Noe'},
              {title: 'Joe Poe'},
              {title: 'Moe Moe'},
              {title: 'Toe Toe'}
            ]}
            header='Attendees Prop'
            subheader='must be very long long long long long message message' 
          />
          <SpaceListMeeting
            header='isBold(true)'
            subheader='subheader'
            isBold
          />
          <SpaceListMeeting
            buttonLabel='In 5 Min'
            header='MeetingType(group)'
            subheader='subheader'
            meetingType='group'
          />
          <SpaceListMeeting
            buttonLabel='2:25'
            header='MeetingType(number)'
            subheader='subheader'
            meetingType='number'
          />
          <SpaceListMeeting
            attendees={[
              {title: 'Joe Boe'},
              {title: 'Moe Moe'},
              {title: 'Toe Toe'}
            ]}
            buttonLabel='30:25'
            header='MeetingType(device)'
            meetingType='device'
          />
          <SpaceListMeeting
            attendees={[
              {title: 'Joe Boe'},
              {title: 'Moe Moe'},
              {title: 'Toe Toe'}
            ]}
            buttonLabel='30:25'
            header='ChildrenLeft Prop'
            childrenLeft={<Avatar icon={<Icon color='blue' name='mention_12' />} />}
          />
        </List>
      </div>
    );
  }
}
**/