/*
User Story: As a user, I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
Bonus User Story:As a user, I can click a button to see a random Wikipedia entry.
Bonus User Story:As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.
Hint: Here's an entry on using Wikipedia's API: https://www.mediawiki.org/wiki/API:Main_page
sample: https://codepen.io/GeoffStorbeck/full/MwgQea
open search wiki data: https://en.wikipedia.org/w/api.php?action=help&modules=opensearch
*/
var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=&callback=jsonpcallback';
var searchVal = '',
  enterKeyFlag = false;
var dropDownSuggestion = $('#search-suggestion'),
  searchItemsContainer = $('.search-results-container'),
  dropDownTpl = _.template($('#search-suggestion-content').html()),
  searchItemsTpl = _.template($('#search-results-content').html());

// MODEL
var wikiModel = {
  items: []
}
var callWikiAPI = function(searchVal) {
  $.ajax({
    url: url,
    dataType: 'jsonp',
    jsonpCallback: 'jsonpcallback',
    data: $.param({
      search: searchVal
    }),
    success: function(data) {
      searchItemsContainer.html('');
      dropDownSuggestion.html(''); // clear DOM display
      wikiModel.items = []; // clear model array as well

      for (i = 0; i < data[1].length; i++) {
        var dataTpl = {
          searchItemName: data[1][i],
          searchItemLink: data[3][i],
          searchItemDesc: data[2][i]
        }
        wikiModel.items.push(dataTpl);
      }
    }
  });
}

// OBSERVER
var observer = function(changes) {
  changes.forEach(function(v, i) {
    // binds model to view
    displayEntries(v.object.items);
  });
}
Object.observe(wikiModel, observer);

// VIEWS
var displayEntries = function(v) {
  v.forEach(function(d) {
    dropDownSuggestion.append(dropDownTpl(d));
  });

  if (enterKeyFlag) {
    v.forEach(function(d, i) {
      searchItemsContainer.append(searchItemsTpl(d));

      // after populating container with search results,
      // set enterKeyFlag back to false when last item is loaded
      if (i === 9) enterKeyFlag = false;
    });
  }
}

// EVENTS
var weatherMeView = {
  dropDownCntr: 0,
  searchWiki: function() { // search field - get input and store in searchVal
    var tt = this;

    $('input').bind('input', function(v) {
      // basic search features
      searchVal = '';
      searchVal += v.target.value;
      callWikiAPI(searchVal);
      // end - basic search features

      // dropdown search suggestion
      dropDownSuggestion.show();
      if (searchVal === '') tt.dropDownCntr = 0;
      // end - dropdown search suggestion
    });
  },
  loadSearchItems: function() { // Enter key - callwiki api when done typing in input
    var tt = this;

    $('body').keydown(function(e) {
      if (e.keyCode === 13) {
        // basic search features
        enterKeyFlag = true;
        callWikiAPI(searchVal);
        // end - basic search features

        // dropdown search suggestion
        $('input')[0].value = searchVal;
        dropDownSuggestion.hide();
        tt.dropDownCntr = 0;
        // end - dropdown search suggestion
      }
    });
  },
  navigateSuggestions: function() { // Arrow Up and Down Keys - suggestion box below search field
    var tt = this;

    $('body').keydown(function(v) {
      var sl = dropDownSuggestion[0].children;

      if (v.keyCode === 40) { // when Down key is pressed
        /* NOTE:
         * find a way to catch this error
         * Uncaught TypeError: Cannot read property 'className' of undefined
         */
        if (sl[tt.dropDownCntr].className === undefined) {
          console.log('this is the end');
        } else {
          if (sl[tt.dropDownCntr-1] !== undefined) sl[tt.dropDownCntr-1].className = ''; // removed highlight on prev
          sl[tt.dropDownCntr].className = 'selected'; // add highlight on current
          searchVal = sl[tt.dropDownCntr].innerText; // get text and update searchVal
          
          tt.dropDownCntr++;
        }
      }

      if (v.keyCode === 38) { // when Up key is pressed
        if (sl[tt.dropDownCntr-1].className === undefined) {
          console.log('theres no items');
        } else {
          tt.dropDownCntr--;
          sl[tt.dropDownCntr].className = '';
          sl[tt.dropDownCntr-1].className = 'selected';
          searchVal = sl[tt.dropDownCntr-1].innerText;
        }
      }

    });
  }
}

$(function() {
  weatherMeView.searchWiki();
  weatherMeView.loadSearchItems();
  weatherMeView.navigateSuggestions();
});