"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ = require("./..");

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

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

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

  function SideNav() {
    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 = {
      expanded: _this.props.expanded
    };

    _this.handleNavToggle = function () {
      _this.setState({
        expanded: !_this.state.expanded
      });
    };

    return _this;
  }

  var _proto = SideNav.prototype;

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

    var _this$props = this.props,
        children = _this$props.children,
        navSectionTitle = _this$props.navSectionTitle,
        topMenu = _this$props.topMenu,
        expandable = _this$props.expandable,
        className = _this$props.className;
    var topMenuTitle = topMenu ? 'top' : 'sub';
    var expandedStatus = !expandable || this.state.expanded ? 'expanded' : 'collapse';

    var navSectionTitleText = navSectionTitle && _react.default.createElement("h3", {
      className: "cui-side-nav__title--" + topMenuTitle
    }, _react.default.createElement("button", {
      className: "cui-side-nav__button",
      onClick: function onClick() {
        expandable ? _this2.handleNavToggle() : false;
      }
    }, navSectionTitle, expandable && expandedStatus === 'collapse' && _react.default.createElement(_.Icon, {
      name: "arrow-down_16"
    }), expandable && expandedStatus === 'expanded' && _react.default.createElement(_.Icon, {
      name: "arrow-up_16"
    })));

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

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

SideNav.displayName = 'SideNav';
SideNav.propTypes = {
  /**
   * Children Nodes to Render inside side navigation
   */
  children: _propTypes.default.node,

  /**
   * Title for the side navigation
   */
  navSectionTitle: _propTypes.default.string,

  /**
   * Check whether the navigation is the top level
   */
  topMenu: _propTypes.default.bool,

  /**
   * Make the navigation expandable
   */
  expandable: _propTypes.default.bool,

  /**
   * Set navigation expanded or collapsed
   */
  expanded: _propTypes.default.bool,

  /**
  * optional customized css class string
  */
  className: _propTypes.default.string
};
SideNav.defaultProps = {
  children: null,
  navSectionTitle: '',
  topMenu: false,
  expandable: false,
  expanded: false,
  className: ''
};
var _default = SideNav;
/**
* @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>
    );
  }
}
**/

exports.default = _default;