import React from 'react/addons';
import './NavigationCollection.css';
import {Row, Col, Grid, Accordion, Panel} from 'react-bootstrap';

var NavigationCollection = React.createClass({
  render() {
    let id = 0;
    let sectionTitles = this.props.data.NavCollection.Contents.NavItem.map(item => {

      let navImage=null;
      let navItem=null;

      let isNewWindow = item.isNewWindow=='True' ? '_blank' : '';

      if (item.Type!=='Folder'){
        navItem =
        <a href={item.AbsolutePortalURL}
          target={isNewWindow}
          aria-describedby={item.Description}>
          {item.Label}
        </a>;
      } else {
        navItem = item.Label;
      }

      if (item.ImageURL!=''){

          navImage=<div>
          <a href={item.AbsolutePortalURL} target={item.isNewWindow} aria-describedby={item.Description}>
          <img src={item.ImageURL} className="pull-left" alt={item.Label} />
          </a>
          </div>;
      }

      var style = {
        marginBottom: '0px'
      };

      return (
        <div className="" key={item.Name}>
          {navImage}
          <h4 style={style}>
            {navItem}
          </h4>
          <i>{item.Description}</i>
          <SectionLinks links={item.NavItem} />
        </div>
      );
    });
    return (
      <div >
        <Panel header={this.props.data.NavCollection.Label}>
          {sectionTitles}
        </Panel>
      </div>
    );
  }
});


var SectionLinks = React.createClass({
  render() {
    let navLinks=null;
    let navImage=null;


    if (this.props.links!==undefined){
      navLinks = this.props.links.map(item => {

        let isNewWindow = item.isNewWindow=='True' ? '_blank' : '';
        if (item.ImageURL!==''){
          navImage = <div>
            <a href={item.AbsolutePortalURL} target={isNewWindow} aria-describedby={item.Description}>
              <img src={item.ImageURL} className="pull-left" alt={item.Label} />
            </a>
            </div>;
        }

        let navLink = null;

        if (item.Type=='Shortcut'){
          navLink =
          <li key={item.Name}>
            {navImage}
            <a href={item.AbsolutePortalURL}
              target={isNewWindow}
              aria-describedby={item.Description}>
              {item.Label}
            </a>
          </li>;
        }
        return (
          navLink
        );
      });
    }

    return(
      <ul className="list clearfix">
        {navLinks}
      </ul>
    );
  }
});

export default NavigationCollection;