"use strict";
(function($) {
  $(document).ready(function() {

    function SandboxNavigator() {
      this.$menu = $('#nav-menus');
      this.$menuBtn = $('#menu-btn');
      this.$menuExample = $('#menu-example');
      this.$menuBtn.click(this.toggleMenu.bind(this));
      this.$links = $('#nav-menus a,#nav-back-home');
      this.init();
    }

    SandboxNavigator.prototype.init = function() {
      this.nav = this.parsePath();
      this.bindAllLinksEvents();
    };

    SandboxNavigator.prototype.toggleMenu = function() {
      this.$menu.toggleClass('in');
    };

    SandboxNavigator.prototype.bindAllLinksEvents = function() {
      this.$links.each(this.bindLinkEvents.bind(this));
    };

    SandboxNavigator.prototype.bindLinkEvents = function(idx, linkEl) {
      var self = this;
      $(linkEl).click(function(e) {
        var $link = $(this);
        e.preventDefault();
        var originalColor = $link.css('backgroundColor');
        self.toggleMenu();
        $link.animate({
          backgroundColor: '#aaa',
        }, 70);
        $link.animate({
          backgroundColor: originalColor,
        }, 70);
        self.navigateTo($link.prop('href'));
      });
    };

    SandboxNavigator.prototype.parsePath = function() {
      const path = window.location.pathname.substr(1);
      const bits = path.split('/');
      return {
        repo: bits[0],
        example: bits.length === 1 ? '' : bits[1]
      };
    };


    SandboxNavigator.prototype.navigateTo = function(path) {
      history.pushState({}, 'New path', path);
      var oldNav = this.nav;
      this.nav = this.parsePath();
      console.log(this.nav, oldNav);
      if(this.nav.repo === oldNav.repo && this.nav.example === oldNav.example) {
        console.log('nav: nop');
      }
      // else if(this.nav.repo !== oldNav.repo && this.nav.example !== oldNav.example) {
      //   console.log('nav: repo&example');
      // }
      else if(this.nav.repo === oldNav.repo) {
        if(this.nav.example === '') {
          console.log('nav: example empty');
          console.log(_ws.events);
          _ws.events.emit('navToRepoRoot');
        }
        else {
          console.log('nav: example changed');
          _ws.events.emit('navToExample', this.nav.repo); 
        }
      }
      else if(this.nav.example === oldNav.example) {
        if(this.nav.repo === '') {
          console.log('nav: repo empty');
          _ws.events.emit('navToRoot');
        }
        else {
          console.log('nav: repo changed');
          _ws.events.emit('navToRepo', this.nav.repo);
          rp.get('/parts/' + this.nav.repo, 'json')
          .then(function(parts) {
            renderMenuExample(parts.menuExample);
          });
        }
      }

    };


    function renderMenuExample(menuExample) {
      var tmpl = $('#menu-example-tmpl').html();
      console.log(tmpl);
      $('#menu-example').html( Mustache.render( tmpl, { menuExample: menuExample } ) );
    }

    window._ws.navigator = new SandboxNavigator();
    console.log('navigator init', _ws);

    //     var $exMenuItem = $('<li><a href="/' + repoSlug + '/' + example.slug + '">' + example.title + '</a></li>')
    //     .appendTo( $('#cat-' + example.category) );
    //     notify('success', "Exemple créé !");
    //     navigateTo('/'+ repoSlug + '/' + example.slug);
    //   })
    //   .catch(errText => notify('error', 'Erreur: ' + errText));
    // }

    // function clearAndCloseEditor() {
    //   $exampleFormIn.val('');
    //   toggleEditor();
    // }


  });
})(jQuery);