import './NavigationDrawerCollection.css';
import { Navigation, List, ListItem, Block, Text } from 'react-essence';

// let NavDrawer = require('./NavigationDrawer.jsx');
// let NavDrawerItem = require('./NavigationDrawerItem.jsx');
let NavDrawerSubItem = require('./NavigationDrawerSubItem.jsx');

import React from 'react';

let NavigationDrawerCollection = React.createClass({
  render() {

    let navDrawerListSubItems = (item) => {
      return <NavDrawerSubItem data={item}/>;
    };

    let navDrawerListItems = (item) => {
      return (
        <ListItem
            contentLink={`#${item.Label.toLowerCase().replace(/(\b) (\b)/g, '$1_$2')}`}
            contentText={item.Label}
            hasSubmenu={true}
            listType='navigation'
            primaryListImage="assets/img/components-b.png">
          {item.NavItem.map(navDrawerListSubItems)}
        </ListItem>
      );
    };

    return (
        <Navigation header={this.props.data.NavCollection.Label} live={false} logo='assets/img/essence_icon.png'>
          <List classes='e-list-navigation' id='NavigationDrawer'>
            {this.props.data.NavCollection.Contents.NavItem.map(navDrawerListItems)}
          </List>
        </Navigation>
    );
  }
});

module.exports = NavigationDrawerCollection;