var React = require('react'),
    MenuItemCollection = require('../../models/menuItemCollection'),
    MenuItem = require('../../models/menuItem'),
    Backbone = require('backbone'),
    NavigationStore = require('../../stores/navigationStore'),
    MenuItemStore = require('../../stores/menuItemStore'),
    MenuItemActions = require('../../actions/menuItemActions'),
    NavigationActions = require('../../actions/navigationActions');

Backbone.$ = $;

var MenuItemListComponent = React.createClass({

    _onChange: function () {
      if (this.isMounted()) {
        this.setState(MenuItemStore.getState());
      }
    },

    getInitialState: function() {
      return MenuItemStore.getState();
    },

    componentDidMount: function() {
      MenuItemStore.addChangeListener(this._onChange);
      MenuItemActions.loadMenuItems();
    },
    onMouseOver: function(menuItem) {
      MenuItemActions.setMenuItemHover(menuItem);
    },
    onMouseOut: function() {
      MenuItemActions.unsetMenuItemHover();
    },
    onMouseLeave: function() {
      MenuItemActions.unsetMenuItemHover();
    },
    onMenuItemClick: function(menuItem) {
      MenuItemActions.unsetMenuItemHover();
      NavigationActions.goToMenuItem(menuItem);
      event.preventDefault();
    },
    //onCategoryClick: function(category, section) {
      //MenuItemActions.unsetSectionHover();
      //NavigationActions.goToCategory(new Category(category), section);
      //event.preventDefault();
    //},
    //onSubcategoryClick: function(subcategory) {
      //// implement in navigation actions
      //// and call
      //// when ready
      //return false;
    //},
    render: function() {
      var self = this;
      var style = {
        position: 'relative'
      };
      var abStyle = {
        position: 'absolute'
      };
      return (
        <div className="navbar navbar-default navbar-static-top">
        <div className="container">
          <ul className='nav nav-pills'>

            <div className="navbar-collapse collapse ">
        <ul className="nav navbar-nav hidden-sm hidden-xs ">
          {/*
          <li id="myhome"><a href="home.html">Današnja ponuda</a></li>
          <li className="mydropdown menu-large">
            <a href="#" id="beba" className="dropdown-toggle "> Beba </a>
            <ul className="dropdown-menu megamenu row">
              <li className="col-sm-3">
                <ul>
                  <li className="dropdown-header"><a href="kategorija.html"><p>ODJEĆA!!!</p></a></li>
                  <li><a href="kategorija.html">Majice</a></li>
                  <li><a href="kategorija.html">Pantalone</a></li>
                  <li><a href="kategorija.html">Trenerke</a></li>
                  <li><a href="kategorija.html">Dukserice</a></li>
                  <li><a href="kategorija.html">Skafanderi</a></li>
                  <li><a href="kategorija.html">Kape</a></li>
                  <li><a href="kategorija.html">Bodići</a></li>
                  <li><a href="kategorija.html">Pidžame</a></li>
                  <li><a href="kategorija.html">Ostalo</a></li>
                </ul>
              </li>
              <li className="col-sm-3">
                <ul>
                  <li className="dropdown-header"><a href="kategorija.html"><p>DJEČIJA SOBA</p></a></li>
                  <li><a href="kategorija.html">Tekstil</a></li>
                  <li><a href="kategorija.html">Namještaj</a></li>
                  <li><a href="kategorija.html">Ostalo</a></li>
                  <li className="dropdown-header"><a href="kategorija.html"><p>OPREMA ZA BEBE</p></a></li>
                  <li className="dropdown-header"><a href="kategorija.html"><p>CRTANI FILMOVI</p></a></li>
                </ul>
              </li>
              <li className="col-sm-3">
                <ul>
                  <li className="dropdown-header"><a href="kategorija.html"><p>HRANA I DODACI PREHRANI</p></a></li>
                  <li><a href="kategorija.html">Sokovi</a></li>
                  <li><a href="kategorija.html">Adaptirana mlijeka</a></li>
                  <li><a href="kategorija.html">Kašice</a></li>
                  <li><a href="kategorija.html">Ostalo</a></li>
                </ul>
              </li>
            </ul>
          </li>*/}

          {this.state.menuItems.map(function(menuItem) {
            return <li className="mydropdown menu-large"  onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)}>
                <a href="#" className="dropdown-toggle " id={menuItem.get('title').toLowerCase()} onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a>
            <ul className={menuItem.get('id') !== self.state.hoveredMenuItem ? "hdropdown-menu megamenu row hide": "dropdown-menu megamenu row"}>
              {menuItem.get('menu_sub_items').map(function(menuSubItem) {
                return (
                  <li className="col-sm-3" key={menuSubItem.id}>

                <ul>
                  <li className="dropdown-header"><a href="kategorija.html" onClick={self.onMenuItemClick.bind(self, menuSubItem)}><p>{menuSubItem.title}</p></a></li>
                  {menuSubItem.menu_sub_sub_items.map(function(menuSubSubItem) {
                    return (<li><a href="#" onClick={self.onMenuItemClick.bind(self, menuSubSubItem)}>{menuSubSubItem.title}</a></li>)
                  })}
                </ul>
                  </li>
                )
              })}
            </ul>
              </li>
          })}
        </ul>
        <ul className="nav navbar-nav hidden-lg hidden-md ">
          <li id="myhome"><a href="#">Današnja ponuda</a></li>
          <li className="dropdown menu-large">
            <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Beba <b className="caret" /> </a>
            <ul className="dropdown-menu megamenu row">
              <li className="col-sm-3">
                <ul>
                  <li className="dropdown-header"><a href="kategorija.html"><p>ODJEĆA!!!</p></a></li>
                  <li><a href="kategorija.html">Majice</a></li>
                  <li><a href="kategorija.html">Pantalone</a></li>
                  <li><a href="kategorija.html">Trenerke</a></li>
                  <li><a href="kategorija.html">Dukserice</a></li>
                  <li><a href="kategorija.html">Skafanderi</a></li>
                  <li><a href="kategorija.html">Kape</a></li>
                  <li><a href="kategorija.html">Bodići</a></li>
                  <li><a href="kategorija.html">Pidžame</a></li>
                  <li><a href="kategorija.html">Ostalo</a></li>
                </ul>
              </li>
              <li className="col-sm-3">
                <ul>
                  <li className="dropdown-header"><a href="kategorija.html"><p>DJEČIJA SOBA</p></a></li>
                  <li><a href="kategorija.html">Tekstil</a></li>
                  <li><a href="kategorija.html">Namještaj</a></li>
                  <li><a href="kategorija.html">Ostalo</a></li>
                  <li className="dropdown-header"><a href="kategorija.html"><p>OPREMA ZA BEBE</p></a></li>
                  <li className="dropdown-header"><a href="kategorija.html"><p>CRTANI FILMOVI</p></a></li>
                </ul>
              </li>
              <li className="col-sm-3">
                <ul>
                  <li className="dropdown-header"><a href="kategorija.html"><p>HRANA I DODACI PREHRANI</p></a></li>
                  <li><a href="kategorija.html">Sokovi</a></li>
                  <li><a href="kategorija.html">Adaptirana mlijeka</a></li>
                  <li><a href="kategorija.html">Kašice</a></li>
                  <li><a href="kategorija.html">Ostalo</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="kategorija.html">Dijete</a></li>
          <li><a href="kategorija.html">Mama</a></li>
          <li><a href="kategorija.html">Made in BiH</a></li>
          <li><a href="kategorija.html">Tržišna marka</a></li>
          {this.state.menuItems.map(function(menuItem) {
            return <li> <a href="#" onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a></li>
          })}
        </ul>
      </div>
      </ul>
        </div>
      </div>
        );
    }
});

module.exports = MenuItemListComponent;