var $        = require('unopinionate').selector
var template = require('../entry.hbs')

$(function() {
  ;(function(window, document) {
    var $form          = $('#search-form')
    var $input         = $form.find('input')
    var $searchResults = $('#search-results')
    var $pkgListing    = $('#all-packages')
    var $searchBtn     = $('.js-search-btn')
    var request
    var lastQuery      = ''

    var toggle = function(validQuery) {
      $searchResults.toggleClass('show', validQuery)
      $pkgListing.toggleClass('hide', validQuery)

      $searchBtn.find('i').toggleClass('icon-cancel', validQuery)
      $searchBtn.find('i').toggleClass('icon-search', !validQuery)
    }

    $form.bind('submit keyup', function(e) {
      var query, isValidQuery

      e.preventDefault()

      query = $input.val()
      isValidQuery = (query !== '')

      toggle(isValidQuery)

      if (!isValidQuery) {
        if (request && typeof request.abort === 'function') {
          request.abort()
        }

        $searchResults.html('')
        return
      }

      if (request && typeof request.abort === 'function') {
        request.abort()
      }

      if (query !== lastQuery) {
        lastQuery = query
        $searchResults.html(
          "<img class='search-ajax' src='-/static/ajax.gif' alt='Spinner'/>")
      }

      request = $.getJSON('-/search/' + query, function( results ) {
        if (results.length > 0) {
          var html = ''

          $.each(results, function(i, entry) {
            html += template(entry)
          })

          $searchResults.html(html)
        } else {
          $searchResults.html(
            "<div class='no-results'><big>No Results</big></div>")
        }
      })
    })

    $(document).on('click', '.icon-cancel', function(e) {
      e.preventDefault()
      $input.val('')
      $form.keyup()
    })

  })(window, window.document)
})