'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _values = require('babel-runtime/core-js/object/values');

var _values2 = _interopRequireDefault(_values);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lodash = require('lodash');

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

/**
 * @category containers
 * @component list-item
 * @variations collab-ui-react
 */

var ListItem = function (_React$Component) {
  (0, _inherits3.default)(ListItem, _React$Component);

  function ListItem() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, ListItem);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
      id: (0, _lodash.uniqueId)(_this.props.id && _this.props.id + '-' || 'cui-list-item-')
    }, _this.checkElements = function (tag) {
      var children = (0, _values2.default)(_reactDom2.default.findDOMNode(_this).childNodes);

      return _this.countDOMChildren(children, tag);
    }, _this.countDOMChildren = function (children, tag) {
      return children.reduce(function (agg, child) {
        return child.tagName === tag ? (0, _extends3.default)({}, agg, { count: agg.count += 1 }) : agg;
      }, { count: 0, children: children.length });
    }, _this.getChildrenElements = function (name) {
      var children = _this.props.children;

      var elementCount = 0;
      var childrenLength = 0;

      _react2.default.Children.forEach(children, function (child) {
        childrenLength++;
        if (child.type && child.type.displayName === name) {
          return elementCount++;
        }
      });

      return elementCount && {
        isCorrectUsage: elementCount === childrenLength,
        length: elementCount
      };
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  ListItem.prototype.componentWillMount = function componentWillMount() {
    if (!this.props.children) return;
    var checkChildren = this.getChildrenElements('ListItemSection');

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

  ListItem.prototype.componentDidMount = function componentDidMount() {
    var anchorCount = this.checkElements('A');

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

  ListItem.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _props = this.props,
        focus = _props.focus,
        refName = _props.refName;

    prevProps.focus !== focus && focus && this[refName] && this[refName].focus();
  };

  ListItem.prototype.render = function render() {
    var _this2 = this;

    var _props2 = this.props,
        className = _props2.className,
        customAnchorNode = _props2.customAnchorNode,
        onKeyDown = _props2.onKeyDown,
        onClick = _props2.onClick,
        focus = _props2.focus,
        role = _props2.role,
        refName = _props2.refName,
        link = _props2.link,
        children = _props2.children,
        type = _props2.type,
        customRefProp = _props2.customRefProp,
        label = _props2.label,
        active = _props2.active,
        disabled = _props2.disabled;
    var id = this.state.id;


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

      return _react2.default.cloneElement(node, (0, _extends3.default)({
        'aria-current': focus,
        tabIndex: !disabled && focus ? 0 : -1,
        onClick: onClick,
        onKeyDown: onKeyDown,
        role: role,
        className: 'cui-list-item' + ('' + (type && ' cui-list-item--' + type || '')) + ('' + (active && ' active' || '')) + ('' + (disabled && ' disabled' || '')) + ('' + (className && ' ' + className || '')) + ('' + (node.props.className && ' ' + node.props.className || ''))
      }, customRefProp && (_ref = {}, _ref[customRefProp] = function (ref) {
        return _this2[_this2.props.refName] = ref;
      }, _ref)), label || children || node.props.children);
    };

    var customProps = {
      className: 'cui-list-item' + ('' + (type && ' cui-list-item--' + type || '')) + ('' + (active && ' active' || '')) + ('' + (disabled && ' disabled' || '')) + ('' + (className && ' ' + className || '')),
      role: role,
      ref: function ref(_ref2) {
        return _this2[refName] = _ref2;
      },
      onClick: onClick,
      onKeyDown: onKeyDown,
      tabIndex: focus && !disabled ? 0 : -1,
      'aria-current': focus,
      id: id
    };

    return customAnchorNode ? addRefToAnchor(customAnchorNode) : _react2.default.createElement(link ? 'a' : 'div', (0, _extends3.default)({}, customProps, link && { href: link }), label || children);
  };

  return ListItem;
}(_react2.default.Component);

ListItem.displayName = 'ListItem';


ListItem.defaultProps = {
  customAnchorNode: null,
  children: null,
  className: '',
  customRefProp: '',
  focus: false,
  id: null,
  label: '',
  link: '',
  onClick: null,
  onKeyDown: null,
  refName: 'navLink',
  role: 'listItem',
  type: '',
  active: false,
  disabled: false,
  value: ''
};

exports.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">
        <List>
          <ListItem label='Default List Item 1' />
          <ListItem label='Default List Item 2' />
        </List>
      </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">
        <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>
    );
  }
}
**/

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

module.exports = exports['default'];