'use strict';

exports.__esModule = true;

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

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

var _ref = _react2.default.createElement(_Icon2.default, { name: 'arrow-down_16' }); /**
                                                                                      * @category layout
                                                                                      * @component side-nav
                                                                                      * @variations collab-ui-react
                                                                                      */

var _ref2 = _react2.default.createElement(_Icon2.default, { name: 'arrow-up_16' });

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

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

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

    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 = {
      expanded: _this.props.expanded
    }, _this.handleNavToggle = function () {
      _this.setState({
        expanded: !_this.state.expanded
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

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

    var _props = this.props,
        children = _props.children,
        navSectionTitle = _props.navSectionTitle,
        topMenu = _props.topMenu,
        expandable = _props.expandable,
        className = _props.className;

    var topMenuTitle = topMenu ? 'top' : 'sub';
    var expandedStatus = !expandable || this.state.expanded ? 'expanded' : 'collapse';
    var navSectionTitleText = navSectionTitle && _react2.default.createElement(
      'h3',
      {
        className: 'cui-side-nav__title--' + topMenuTitle
      },
      _react2.default.createElement(
        'button',
        {
          className: 'cui-side-nav__button',
          onClick: function onClick() {
            expandable ? _this2.handleNavToggle() : false;
          } },
        navSectionTitle,
        expandable && expandedStatus === 'collapse' && _ref,
        expandable && expandedStatus === 'expanded' && _ref2
      )
    );

    return _react2.default.createElement(
      'div',
      { className: 'cui-side-nav ' + className + ' cui-side-nav--' + expandedStatus },
      navSectionTitleText,
      children
    );
  };

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

SideNav.displayName = 'SideNav';
exports.default = SideNav;


SideNav.defaultProps = {
  children: null,
  navSectionTitle: '',
  topMenu: false,
  expandable: false,
  expanded: false,
  className: ''
};

/**
* @name Default SideNav
* @description Default SideNav
*
* @category layout
* @component side-nav
* @section default
*
* @js
import { List, ListItem } from '@collab-ui/react';
import { NavLink } from 'react-router-dom'

export default class SideNavDefault extends React.PureComponent {
  render() {
    const anchorNode = <NavLink to='/containers/list-item' />;

    return (
      <div className='row' style={{marginBottom: '1rem'}}>
        <SideNav navSectionTitle='OVERVIEW' topMenu>
          <List>
            <ListItem label='Platform Introduction' customAnchorNode={anchorNode} />
            <ListItem label='Bots' customAnchorNode={anchorNode} />
            <ListItem label='Widgets' customAnchorNode={anchorNode} />
            <ListItem label='Integration' customAnchorNode={anchorNode} />
            <ListItem label='Guest Issuer' customAnchorNode={anchorNode} />
          </List>
        </SideNav>
      </div>
    );
  }
}
**/

/**
* @name Expandable SideNav
* @description Side Navigation with collapse effect
*
* @category layout
* @component side-nav
* @section expand
*
* @js
import { List, ListItem } from '@collab-ui/react';
import { NavLink } from 'react-router-dom'

export default class SideNavExpand extends React.PureComponent {
  render() {
    const anchorNode = <NavLink to='/containers/list-item' />;

    return (
      <div className='row' style={{marginBottom: '1rem'}}>
        <SideNav navSectionTitle='Guides' expandable expanded={false}>
          <List>
            <ListItem label='Authentication' customAnchorNode={anchorNode} />
            <ListItem label='Admin API' customAnchorNode={anchorNode} />
            <ListItem label='Webhooks' customAnchorNode={anchorNode} />
            <ListItem label='Compliance' customAnchorNode={anchorNode} />
          </List>
        </SideNav>
      </div>
    );
  }
}
**/

/**
* @name Nested Expandable SideNav
* @description Nested Side Navigation with collapse effect
*
* @category layout
* @component side-nav
* @section nested
*
* @js
import { List, ListItem } from '@collab-ui/react';
import { NavLink } from 'react-router-dom'

export default class SideNavNested extends React.PureComponent {
  render() {
    const anchorNode = <NavLink to='/containers/list-item' />;

    return (
      <div className='row' style={{marginBottom: '1rem'}}>
        <SideNav navSectionTitle='Reference' expandable expanded={false}>
          <List>
            <ListItem label='Admins' customAnchorNode={anchorNode} />
            <ListItem label='Devices' customAnchorNode={anchorNode} />
            <ListItem label='Licenses' customAnchorNode={anchorNode} />
            <SideNav navSectionTitle='Messages' className='cui-side-nav__reference' expandable expanded={false}>
              <List>
                <ListItem label='List Messages' customAnchorNode={anchorNode} />
                <ListItem label='Create a Messages' customAnchorNode={anchorNode} />
                <ListItem label='Get Message Details' customAnchorNode={anchorNode} />
                <ListItem label='Delete a Message' customAnchorNode={anchorNode} />
              </List>
            </SideNav>
          </List>
        </SideNav>
      </div>
    );
  }
}
**/

/**
* @name Full SideNav
* @description Full Side Navigation
*
* @category layout
* @component side-nav
* @section full
*
* @js
import { List, ListItem } from '@collab-ui/react';
import { NavLink } from 'react-router-dom'

export default class SideNavFull extends React.PureComponent {
  render() {
    const anchorNode = <NavLink to='/containers/list-item' />;

    return (
      <div className='row' style={{marginBottom: '1rem'}}>
        <SideNav navSectionTitle='OVERVIEW' topMenu>
          <List>
            <ListItem label='Platform Introduction' customAnchorNode={anchorNode} />
            <ListItem label='Bots' customAnchorNode={anchorNode} />
            <ListItem label='Widgets' customAnchorNode={anchorNode} />
            <ListItem label='Integration' customAnchorNode={anchorNode} />
            <ListItem label='Guest Issuer' customAnchorNode={anchorNode} />
          </List>
        </SideNav>
        <div style={{marginBottom: '1rem'}}></div>
        <SideNav navSectionTitle='REST API' topMenu>
          <List>
            <ListItem label='Basics' customAnchorNode={anchorNode} />
            <SideNav navSectionTitle='Guides' expandable expanded={false}>
              <List className='cui-submenu'>
                <ListItem label='Authentication' customAnchorNode={anchorNode} />
                <ListItem label='Admin API' customAnchorNode={anchorNode} />
                <ListItem label='Webhooks' customAnchorNode={anchorNode} />
                <ListItem label='Compliance' customAnchorNode={anchorNode} />
                <ListItem label='Metrics and Reporting' customAnchorNode={anchorNode} />
              </List>
            </SideNav>
            <SideNav navSectionTitle='Reference' className='cui-side-nav__reference-container' expandable expanded={false}>
              <List className='cui-submenu'>
                <SideNav navSectionTitle='Admins' />
                <SideNav navSectionTitle='Devices' />
                <SideNav navSectionTitle='Licenses' />
                <SideNav navSectionTitle='Memberships' />
                <SideNav navSectionTitle='Messages' className='cui-side-nav__reference'>
                  <List>
                    <ListItem label='List Messages' customAnchorNode={anchorNode} />
                    <ListItem label='Create a Messages' customAnchorNode={anchorNode} />
                    <ListItem label='Get Message Details' customAnchorNode={anchorNode} />
                    <ListItem label='Delete a Message' customAnchorNode={anchorNode} />
                  </List>
                </SideNav>
                <SideNav navSectionTitle='Organizations' />
                <SideNav navSectionTitle='People' />
                <SideNav navSectionTitle='Policies' />
                <SideNav navSectionTitle='Roles' />
                <SideNav navSectionTitle='Rooms' />
                <SideNav navSectionTitle='Teams' />
                <SideNav navSectionTitle='Team Memberships' />
              </List>
            </SideNav>
          </List>
        </SideNav>
        <div style={{marginBottom: '1rem'}}></div>
        <SideNav navSectionTitle='SDKS' topMenu>
          <List>
            <ListItem label='iOS' customAnchorNode={anchorNode} />
            <ListItem label='Android' customAnchorNode={anchorNode} />
            <ListItem label='Widgets' customAnchorNode={anchorNode} />
            <ListItem label='Windows' customAnchorNode={anchorNode} />
            <ListItem label='Community' customAnchorNode={anchorNode} />
          </List>
        </SideNav>
      </div>
    );
  }
}
**/

module.exports = exports['default'];