import "core-js/modules/es6.object.keys";
import "core-js/modules/es6.string.link";
import "core-js/modules/es7.array.includes";
import "core-js/modules/es6.string.includes";
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/es7.object.values";

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

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { omit, uniqueId } from 'lodash';
/**
 * @category containers
 * @component list-item
 * @variations collab-ui-react
 */

var ListItem =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(ListItem, _React$Component);

  function ListItem() {
    var _this;

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

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

    _this.checkElements = function (tag) {
      var children = Object.values(ReactDOM.findDOMNode(_assertThisInitialized(_assertThisInitialized(_this))).childNodes);
      return _this.countDOMChildren(children, tag);
    };

    _this.countDOMChildren = function (children, tag) {
      return children.reduce(function (agg, child) {
        return child.tagName === tag ? Object.assign({}, agg, {
          count: agg.count += 1
        }) : agg;
      }, {
        count: 0,
        children: children.length
      });
    };

    _this.getChildrenElements = function (nameArr) {
      var children = _this.props.children;
      var elementCount = 0;
      var childrenLength = 0;
      React.Children.forEach(children, function (child) {
        childrenLength++;

        if (child.type && nameArr.includes(child.type.displayName)) {
          return elementCount++;
        }
      });
      return elementCount && {
        isCorrectUsage: elementCount === childrenLength,
        length: elementCount
      };
    };

    _this.handleClick = function (e) {
      var _this$props = _this.props,
          disabled = _this$props.disabled,
          itemIndex = _this$props.itemIndex,
          label = _this$props.label,
          onClick = _this$props.onClick,
          value = _this$props.value;
      var setSelected = _this.context.setSelected;

      if (disabled) {
        e.preventDefault();
        e.stopPropagation();
      }

      e.persist();
      setSelected && setSelected(e, itemIndex, value, label);
      onClick && onClick(e);
    };

    _this.handleKeyDown = function (e) {
      var _this$props2 = _this.props,
          disabled = _this$props2.disabled,
          itemIndex = _this$props2.itemIndex,
          onKeyDown = _this$props2.onKeyDown;
      var handleListKeyDown = _this.context.handleListKeyDown;

      if (disabled) {
        e.preventDefault();
        e.stopPropagation();
      }

      e.persist();
      handleListKeyDown && handleListKeyDown(e, itemIndex);
      onKeyDown && onKeyDown(e);
    };

    return _this;
  }

  var _proto = ListItem.prototype;

  _proto.componentWillMount = function componentWillMount() {
    if (!this.props.children) return;
    var checkAllChildren = this.getChildrenElements(['ListItemSection', 'EventOverlay']);
    var checkSectionChildren = this.getChildrenElements(['ListItemSection']);

    if (!checkAllChildren) {
      return;
    } else if (!checkAllChildren.isCorrectUsage) {
      throw new Error("If ListItemSection Component is used all children must use ListItemSection Components.");
    } else if (checkSectionChildren.length > 3) {
      throw new Error("Only 3 ListItemSection components can be used as children. You've used " + checkSectionChildren.length);
    }
  };

  _proto.componentDidMount = function componentDidMount() {
    var anchorCount = this.checkElements('A');
    var _this$props3 = this.props,
        focus = _this$props3.focus,
        refName = _this$props3.refName,
        focusOnLoad = _this$props3.focusOnLoad;

    if (anchorCount.count > 1) {
      throw new Error('Only 1 primary child anchor tag may be used with ListItem component');
    } else if (anchorCount.count === 1 && anchorCount.children > 1) {
      throw new Error('Anchor tag can not have sibling');
    }

    focusOnLoad && focus && this[refName] && this[refName].focus();
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _this$props4 = this.props,
        focus = _this$props4.focus,
        refName = _this$props4.refName;
    prevProps.focus !== focus && focus && this[refName] && this[refName].focus();
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props5 = this.props,
        active = _this$props5.active,
        children = _this$props5.children,
        className = _this$props5.className,
        customAnchorNode = _this$props5.customAnchorNode,
        customRefProp = _this$props5.customRefProp,
        disabled = _this$props5.disabled,
        focus = _this$props5.focus,
        isReadOnly = _this$props5.isReadOnly,
        label = _this$props5.label,
        link = _this$props5.link,
        refName = _this$props5.refName,
        role = _this$props5.role,
        separator = _this$props5.separator,
        title = _this$props5.title,
        type = _this$props5.type,
        props = _objectWithoutPropertiesLoose(_this$props5, ["active", "children", "className", "customAnchorNode", "customRefProp", "disabled", "focus", "isReadOnly", "label", "link", "refName", "role", "separator", "title", "type"]);

    var id = this.state.id;
    var otherProps = omit(Object.assign({}, props), ['focusOnLoad', 'id', 'itemIndex', 'onClick', 'onKeyDown', 'value']);

    var addRefToAnchor = function addRefToAnchor(node) {
      var _ref;

      return React.cloneElement(node, Object.assign({
        'aria-current': focus,
        className: 'cui-list-item' + ("" + (type && " cui-list-item--" + type || '')) + ("" + (active && " active" || '')) + ("" + (disabled && " disabled" || '')) + ("" + (isReadOnly && " cui-list-item--read-only" || '')) + ("" + (separator && " cui-list-item--separator" || '')) + ("" + (className && " " + className || '')) + ("" + (node.props.className && " " + node.props.className || '')),
        role: role
      }, customRefProp && (_ref = {}, _ref[customRefProp] = function (ref) {
        return _this2[_this2.props.refName] = ref;
      }, _ref), id && {
        id: id
      }, !isReadOnly && {
        onClick: _this2.handleClick,
        onKeyDown: _this2.handleKeyDown,
        tabIndex: !disabled && focus ? 0 : -1
      }, otherProps, (title || label) && {
        title: title || label
      }), children || node.props.children || label);
    };

    var customProps = Object.assign({
      'aria-current': focus,
      className: 'cui-list-item' + ("" + (type && " cui-list-item--" + type || '')) + ("" + (active && " active" || '')) + ("" + (disabled && " disabled" || '')) + ("" + (isReadOnly && " cui-list-item--read-only" || '')) + ("" + (separator && " cui-list-item--separator" || '')) + ("" + (className && " " + className || '')),
      id: id,
      role: role,
      ref: function ref(_ref2) {
        return _this2[refName] = _ref2;
      }
    }, !isReadOnly && {
      onClick: this.handleClick,
      onKeyDown: this.handleKeyDown,
      tabIndex: !disabled && focus ? 0 : -1
    }, link && {
      href: link
    }, otherProps, (title || label) && {
      title: title || label
    });
    return customAnchorNode ? addRefToAnchor(customAnchorNode) : React.createElement(link ? 'a' : 'div', Object.assign({}, customProps), children || label);
  };

  return ListItem;
}(React.Component);

ListItem.propTypes = {
  /** @prop Active prop to help determine styles | false */
  active: PropTypes.bool,

  /** @prop Children nodes to render inside ListItem | null  */
  children: PropTypes.node,

  /** @prop Optional css class string | '' */
  className: PropTypes.string,

  /** @prop Node in which the selection begins | null */
  customAnchorNode: PropTypes.element,

  /** @prop ListItem Custom Prop Name for child with custom Ref | null */
  customRefProp: PropTypes.string,

  /** @prop Disabled attribute for ListItem to determine styles | false */
  disabled: PropTypes.bool,

  /** @prop Specifies if ListItem should automatically get focus | false */
  focus: PropTypes.bool,

  /** @prop Specifies if ListItem should automatically get focus when page loads | false */
  focusOnLoad: PropTypes.bool,

  /** @prop Sets ListItem id | null */
  id: PropTypes.string,

  /** @prop Determines if ListItem is clickable | false */
  isReadOnly: PropTypes.bool,

  /** @prop ListItem index number | null */
  itemIndex: PropTypes.number,

  /** @prop ListItem label text | '' */
  label: PropTypes.string,

  /** @prop external link associated input | '' */
  link: PropTypes.string,

  /** @prop Callback function invoked by user tapping on ListItem | null */
  onClick: PropTypes.func,

  /** @prop Callback function invoked by user pressing on a key | null */
  onKeyDown: PropTypes.func,

  /** @prop ListItem ref name | 'navLink' */
  refName: PropTypes.string,

  /** @prop Aria role | 'listItem' */
  role: PropTypes.string,

  /** @prop Prop that controls whether to show separator or not | false */
  separator: PropTypes.bool,

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

  /** @prop ListItem size | '' */
  type: PropTypes.oneOf(['', 'small', 'large', 'xlarge', 'space', 'header', 36, 52, 60]),

  /** @prop ListItem value for OnSelect value | '' */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.array])
};
ListItem.defaultProps = {
  active: false,
  children: null,
  className: '',
  customAnchorNode: null,
  customRefProp: '',
  disabled: false,
  focus: false,
  focusOnLoad: false,
  id: null,
  itemIndex: null,
  isReadOnly: false,
  label: '',
  link: '',
  onClick: null,
  onKeyDown: null,
  refName: 'navLink',
  role: 'listItem',
  separator: false,
  title: '',
  type: '',
  value: ''
};
ListItem.contextTypes = {
  setSelected: PropTypes.func,
  handleListKeyDown: PropTypes.func
};
ListItem.displayName = 'ListItem';
export default ListItem;
/**
* @name Default
*
* @category containers
* @component list-item
* @section default
*
* @js
*
import { List } from '@collab-ui/react';

export default class ListItemDefault extends React.PureComponent {

  render() {
    return(
      <div className="medium-4 columns">
        <div>
          <List>
            <ListItem label='Default List Item 1' />
            <ListItem label='Default List Item 2' />
          </List>
        </div>
        <div className="cui--contrast">
          <List>
            <ListItem label='List Item 1 (with Contrast)' />
            <ListItem label='List Item 2 (with Contrast)' />
          </List>
        </div>
      </div>
    );
  }
}
**/

/**
* @name Type
*
* @category containers
* @component list-item
* @section type
*
* @js
*
import { List } from '@collab-ui/react';

export default class ListItemType extends React.PureComponent {

  render() {
    return(
      <div className="medium-4 columns">
        <div>
          <List>
            <ListItem type='small' link='javascript:void(0)' label='Small List Item' />
            <ListItem link='javascript:void(0)' label='Regular List Item' />
            <ListItem type='large' link='javascript:void(0)' label='Large List Item' />
            <ListItem type='xlarge' link='javascript:void(0)' label='XLarge List Item' />
          </List>
        </div>
        <div className="cui--contrast">
          <List>
            <ListItem type='small' link='javascript:void(0)' label='Small List Item (with Contrast)' />
            <ListItem link='javascript:void(0)' label='Regular List Item (with Contrast)' />
            <ListItem type='large' link='javascript:void(0)' label='Large List Item (with Contrast)' />
            <ListItem type='xlarge' link='javascript:void(0)' label='XLarge List Item (with Contrast)' />
          </List>
        </div>
      </div>
    );
  }
}
**/

/**
* @name List Item Sections
*
* @category containers
* @component list-item
* @section list-item-sections
*
* @js
*
import { List, ListItemSection } from '@collab-ui/react';

export default class ListItemSectionExample extends React.PureComponent {

  render() {
    return(
      <div className="medium-4 columns">
        <List>
          <ListItem link='javascript:void(0)'>
            <ListItemSection position='left'>
              Left
              </ListItemSection>
              <ListItemSection position='right'>
                Right
              </ListItemSection>
          </ListItem>
          <ListItem link='javascript:void(0)'>
            <ListItemSection position='center'>
              Center
            </ListItemSection>
          </ListItem>
          <ListItem link='javascript:void(0)'>
            <ListItemSection position='center-align'>
              Center Align
            </ListItemSection>
          </ListItem>
          <ListItem link='javascript:void(0)'>
            <ListItemSection position='left'>
              Left
            </ListItemSection>
            <ListItemSection position='center'>
              Center
            </ListItemSection>
            <ListItemSection position='right'>
              Right
            </ListItemSection>
          </ListItem>
        </List>
      </div>
    );
  }
}
**/

/**
* @name Custom Link
*
* @category containers
* @component list-item
* @section custom-anchor
*
* @js
*
import { List } from '@collab-ui/react';
import { NavLink } from 'react-router-dom';

export default class CustomLinkExample extends React.PureComponent {

  render() {
    const anchorNode = <NavLink to='/containers/list-item' />;
    return(
      <div className="medium-4 columns">
        <List>
          <ListItem label='Custom Anchor' customRefProp='innerRef' customAnchorNode={anchorNode}/>
        </List>
      </div>
    );
  }
}
**/

/**
* @name Tab Type
*
* @category containers
* @component list-item
* @section tab-type
*
* @js
*
import { List } from '@collab-ui/react';

export default class HorizontalListExample extends React.PureComponent {

  render() {
    return(
      <List tabType="horizontal" wrap>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
        <ListItem style={{width: '100px', flex: '0 0 auto'}}>Hello</ListItem>
      </List>
    );
  }
}
**/