import "core-js/modules/es6.object.assign";
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/es7.array.includes";
import "core-js/modules/es6.string.includes";
import "core-js/modules/es6.regexp.match";
import "core-js/modules/es6.regexp.split";
import "core-js/modules/es6.regexp.constructor";
import "core-js/modules/es6.regexp.replace";

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 { uniqueId } from 'lodash';
import { Avatar, Icon, ListItem, ListItemSection } from "./..";
/**
 * @category containers
 * @component list-item
 * @variations collab-ui-react
 */

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

  function SpaceListItem() {
    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-item-')
    };
    return _this;
  }

  var _proto = SpaceListItem.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        attachments = _this$props.attachments,
        className = _this$props.className,
        childrenLeft = _this$props.childrenLeft,
        childrenRight = _this$props.childrenRight,
        header = _this$props.header,
        headerSecondary = _this$props.headerSecondary,
        highlightColor = _this$props.highlightColor,
        isAlertOn = _this$props.isAlertOn,
        isBold = _this$props.isBold,
        isDecrypting = _this$props.isDecrypting,
        isMentioned = _this$props.isMentioned,
        isMuted = _this$props.isMuted,
        isOverview = _this$props.isOverview,
        isUnread = _this$props.isUnread,
        resultRight = _this$props.resultRight,
        searchTerm = _this$props.searchTerm,
        subheader = _this$props.subheader,
        title = _this$props.title,
        type = _this$props.type,
        props = _objectWithoutPropertiesLoose(_this$props, ["attachments", "className", "childrenLeft", "childrenRight", "header", "headerSecondary", "highlightColor", "isAlertOn", "isBold", "isDecrypting", "isMentioned", "isMuted", "isOverview", "isUnread", "resultRight", "searchTerm", "subheader", "title", "type"]);

    var id = this.state.id;
    var getTitle = !title && typeof header === 'string' ? header : title;

    var getIcon = function getIcon() {
      if (isMuted) {
        return React.createElement(Icon, {
          color: "$white-60",
          name: "alert-muted_12"
        });
      } else if (isUnread) {
        return React.createElement("i", {
          style: {
            fontSize: '12px',
            color: '#07C1E4'
          },
          className: "icon icon-unread-badge_16"
        });
      } else if (isMentioned) {
        return React.createElement(Icon, {
          color: "blue",
          name: "mention_12"
        });
      } else if (isAlertOn) {
        return React.createElement(Icon, {
          color: "$white-60",
          name: "alert_12"
        });
      }

      return null;
    };

    var leftSection = isOverview ? React.createElement(Avatar, {
      isOverview: true,
      icon: React.createElement(Icon, {
        name: "handset_24"
      })
    }) : childrenLeft;
    var rightSection = React.createElement(ListItemSection, {
      key: "child-2",
      position: "right"
    }, childrenRight ? childrenRight : getIcon());

    var addEscapes = function addEscapes(text) {
      return text && text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") || '';
    };

    var highlightSubheader = function highlightSubheader() {
      var escapedTerm = addEscapes(searchTerm);
      var re = new RegExp("(" + escapedTerm + ")", 'gi');
      return searchTerm && typeof subheader === 'string' ? subheader.split(re).map(function (ele, idx) {
        return ele.match(re) ? React.createElement("span", {
          key: "subheader-" + idx,
          className: "cui-list-item__subheader--highlight",
          style: {
            color: highlightColor
          }
        }, ele) : ele;
      }) : subheader;
    };

    var highlightHeader = function highlightHeader() {
      var escapedTerm = addEscapes(searchTerm);
      var re = new RegExp("(" + escapedTerm + ")", 'gi');
      return searchTerm && typeof header === 'string' ? header.split(re).map(function (ele, idx) {
        return ele.match(re) ? React.createElement("span", {
          key: "header-" + idx,
          className: "cui-list-item__header--highlight",
          style: {
            color: highlightColor
          }
        }, ele) : ele;
      }) : header;
    };

    var getHeader = ['search', 'filter', 'flag', 'filter-search'].includes(type) ? [React.createElement("span", {
      key: "header-0",
      className: "cui-list-item__header-main"
    }, header), headerSecondary && React.createElement("span", {
      className: "cui-list-item__header-secondary",
      key: "header-1"
    }, headerSecondary)] : highlightHeader();
    var children = [React.createElement(ListItemSection, {
      key: "child-0",
      position: "left"
    }, leftSection || React.createElement(Avatar, {
      title: "NA"
    })), React.createElement(ListItemSection, {
      key: "child-1",
      position: "center"
    }, React.createElement("div", {
      className: 'cui-list-item__header' + ("" + ((searchTerm || isOverview) && " cui-list-item__header--overview" || '')) + ("" + (isDecrypting && " cui-decrypting" || ''))
    }, getHeader), ['search', 'filter', 'flag', 'filter-search'].includes(type) ? React.createElement(ListItemSection, {
      position: "center",
      className: "cui-list-item__result-container"
    }, ['flag'].includes(type) ? React.createElement(ListItemSection, {
      position: "center",
      key: "attachment-line-1",
      className: "cui-list-item__attachment"
    }, React.createElement("div", {
      className: "cui-list-item__attachment--top"
    }, React.createElement(ListItemSection, {
      position: "center",
      className: "cui-list-item__attachment--top-left"
    }, highlightSubheader(subheader)), resultRight && React.createElement(ListItemSection, {
      position: "right",
      className: "cui-list-item__attachment--top-right"
    }, resultRight)), attachments && attachments.length && React.createElement("div", {
      className: "cui-list-item__attachment--bottom"
    }, attachments[0])) : React.createElement("div", {
      className: "cui-list-item__result"
    }, highlightSubheader(subheader))) : React.createElement("div", {
      className: "cui-list-item__subheader" + ("" + (isDecrypting && " cui-decrypting" || ''))
    }, subheader))].concat(!type ? [rightSection] : []);
    return React.createElement(ListItem, _extends({
      className: "" + (isBold && " cui-list-item--unread" || '') + ("" + (type && " cui-list-item--space-" + type || '')) + ("" + (className && " " + className || '')),
      id: id,
      title: getTitle,
      type: "space"
    }, props), children);
  };

  return SpaceListItem;
}(React.PureComponent);

SpaceListItem.propTypes = {
  /** @prop SpaceListItem Attachment Array | null */
  attachments: PropTypes.arrayOf(PropTypes.node),

  /** @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 node */
  header: PropTypes.node.isRequired,

  /** @prop Secondary header for center section | '' */
  headerSecondary: PropTypes.string,

  /** @prop Highlight Color for Regex | '' */
  highlightColor: PropTypes.string,

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

  /** @prop Determines if SpaceListItem's Alert is on | false */
  isAlertOn: PropTypes.bool,

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

  /** @prop Determines if SpaceListItem decrypting | false */
  isDecrypting: PropTypes.bool,

  /** @prop Determines if SpaceListItem has been mentioned | false */
  isMentioned: PropTypes.bool,

  /** @prop Determines if SpaceListItem has been muted | false */
  isMuted: PropTypes.bool,

  /** @prop Determines if SpaceListItem is an Overview item | false */
  isOverview: PropTypes.bool,

  /** @prop Determines if SpaceListItem is unread | false */
  isUnread: PropTypes.bool,

  /** @prop Children node for result right section | null */
  resultRight: PropTypes.node,

  /** @prop Word used for search | '' */
  searchTerm: PropTypes.string,

  /** @prop SpaceListItem subheader node | ''s */
  subheader: PropTypes.node,

  /** @prop SpaceListItem title | '' */
  title: PropTypes.string,

  /** @prop SpaceListItem type | '' */
  type: PropTypes.oneOf(['', 'filter', 'filter-search', 'filter-summary', 'flag', 'search'])
};
SpaceListItem.defaultProps = {
  attachments: null,
  childrenLeft: null,
  childrenRight: null,
  className: '',
  headerSecondary: '',
  highlightColor: '',
  id: '',
  isAlertOn: false,
  isBold: false,
  isDecrypting: false,
  isMentioned: false,
  isMuted: false,
  isOverview: false,
  isUnread: false,
  resultRight: null,
  searchTerm: '',
  subheader: '',
  title: '',
  type: ''
};
SpaceListItem.displayName = 'SpaceListItem';
export default SpaceListItem;
/**
* @name Space List
*
* @category containers
* @component list-item
* @section space
*
* @js
*
import {
  Icon,
  List,
  ListItemHeader,
  SpaceListItem,
} from '@collab-ui/react';
import { NavLink } from 'react-router-dom';

export default class SpaceListExamples extends React.PureComponent {

  render() {
    const anchorNode = <NavLink to='/containers/list-item' />;
    return(
      <div className="medium-4 columns">
        <List style={{backgroundColor: 'black'}}>
          <SpaceListItem isOverview header='Overview Item' />
          <SpaceListItem header='Header Only'/>
          <SpaceListItem header='Bold Unread' isBold isUnread/>
          <SpaceListItem header='Bold Mentioned' isBold isMentioned/>
          <SpaceListItem header='isAlertOn' isAlertOn/>
          <SpaceListItem header='isMuted' isMuted/>
          <SpaceListItem header='Disabled' subheader='subheader' disabled/>
          <SpaceListItem header='Subheader as Node' subheader={<span style={{color: '#98D5CA'}}>Marketing</span>}/>
          <ListItemHeader header='List Header-Type(space)' children={<a>More</a>} type='space'/>
          <SpaceListItem header='Header with SearchTerm' searchTerm='search'/>
          <SpaceListItem header='Both Headers w/ SearchTerm' subheader='Searchable subheader' searchTerm='search'/>
          <SpaceListItem header='Subheader(node)-searchTerm' subheader={<span style={{color: '#D7ABE1'}}>Searching</span>} searchTerm='search'/>
          <SpaceListItem header='Type(search)' headerSecondary='16:00' subheader='HighlightColor changes search color' searchTerm='search' type='search' highlightColor='white'/>
          <SpaceListItem header='Type(filter)' headerSecondary='12/03/2018' subheader='headerSecondary=string' searchTerm='Barbara' type='filter' />
          <SpaceListItem header='Type(filter-search)' headerSecondary='12/03/2018' subheader='For search after a (filter)' type='filter-search' searchTerm='(filter)'/>
          <SpaceListItem header='Type(filter-summary) (8)' type='filter-summary' childrenLeft={<Icon name='alert_12' />}/>
          <SpaceListItem header='Type(flag)-attachments' attachments={[<span><Icon name='document_12' />  <span>Ideas.pdf</span></span>]} subheader='resultRight=node, attachments=[node]' headerSecondary='12/03/2018' type='flag' resultRight={<Icon name='flag-active_12'/>}/>
          <SpaceListItem header='Type(flag)' subheader='header&subheader=node' headerSecondary='08/03/2018' type='flag' resultRight={<Icon name='flag-active_12'/>}/>
        </List>
      </div>
    );
  }
}
**/

/**
* @name Contrast Space List
*
* @category containers
* @component list-item
* @section space-contrast
*
* @js
*
import {
  Icon,
  List,
  ListItemHeader,
  SpaceListItem,
} from '@collab-ui/react';
import { NavLink } from 'react-router-dom';

export default class SpaceListExamples extends React.PureComponent {

  render() {
    const anchorNode = <NavLink to='/containers/list-item' />;
    return(
      <div className="medium-4 columns">
        <div className="cui--contrast">
          <List style={{backgroundColor: 'black'}}>
            <SpaceListItem isOverview header='Overview Item' />
            <SpaceListItem header='Header Only'/>
            <SpaceListItem header='Bold Unread' isBold isUnread/>
            <SpaceListItem header='Bold Mentioned' isBold isMentioned/>
            <SpaceListItem header='isAlertOn' isAlertOn/>
            <SpaceListItem header='isMuted' isMuted/>
            <SpaceListItem header='Disabled' subheader='subheader' disabled/>
            <SpaceListItem header='Subheader as Node' subheader={<span style={{color: '#98D5CA'}}>Marketing</span>}/>
            <ListItemHeader header='List Header-Type(space)' children={<a>More</a>} type='space'/>
            <SpaceListItem header='Header with SearchTerm' searchTerm='search'/>
            <SpaceListItem header='Both Headers w/ SearchTerm' subheader='Searchable subheader' searchTerm='search'/>
            <SpaceListItem header='Subheader(node)-searchTerm' subheader={<span style={{color: '#D7ABE1'}}>Searching</span>} searchTerm='search'/>
            <SpaceListItem header='Type(search)' headerSecondary='16:00' subheader='HighlightColor changes search color' searchTerm='search' type='search' highlightColor='white'/>
            <SpaceListItem header='Type(filter)' headerSecondary='12/03/2018' subheader='headerSecondary=string' searchTerm='Barbara' type='filter' />
            <SpaceListItem header='Type(filter-search)' headerSecondary='12/03/2018' subheader='For search after a (filter)' type='filter-search' searchTerm='(filter)'/>
            <SpaceListItem header='Type(filter-summary) (8)' type='filter-summary' childrenLeft={<Icon name='alert_12' />}/>
            <SpaceListItem header='Type(flag)-attachments' attachments={[<span><Icon name='document_12' />  <span>Ideas.pdf</span></span>]} subheader='resultRight=node, attachments=[node]' headerSecondary='12/03/2018' type='flag' resultRight={<Icon name='flag-active_12'/>}/>
            <SpaceListItem header='Type(flag)' subheader='header&subheader=node' headerSecondary='08/03/2018' type='flag' resultRight={<Icon name='flag-active_12'/>}/>
          </List>
        </div>
      </div>
    );
  }
}
**/