jQuery(function($) {
  "use strict";

  var TEMPLATES = new LuigiTemplate.Cache({
    site: [
      "<a ",
        "href='#' ",
        "class='list-group-item %{css|h}' ",
        "title='Edit site \"%{name|h}\".' ",
        "data-site_id='%{site_id|h}' ",
        "data-q='%{q|h}' ",
      ">",
        "%{name|h}",

        "<span class='%{badge_css} badge pull-right'>",
          "default",
        "</span>",
      "</a>",
    ],

    loading: [
      "<span class='list-group-item disabled'>",
        "<i class='fa fa-spinner fa-spin'></i>",
        " ",
        "Loading...",
      "</span>",
    ],

    error: [
      "<span class='list-group-item list-group-item-danger disabled'>",
        "<i class='fa fa-exclamation-triangle'></i>",
        " ",
        "Error: %{error|h}",
      "</span>",
    ],
  });

  function filter() {
    var qs = $('#sites-q').val().replace(/^\s+|\s+$/g, '').toLowerCase().split(/\s+/);

    if (qs.length > 0) {
      // hide all sites
      $('#sites .list-group-item').addClass('hidden');

      // show matching sites
      $($.grep($('#sites .list-group-item'), function(el) {
        var eq = $(el).data('q');

        return ($.grep(qs, function(q) {
          return eq.indexOf(q) !== -1;
        }).length == qs.length);
      })).removeClass('hidden');
    } else {
      // show all sites
      $('#sites .list-group-item').removeClass('hidden');
    }
  }

  function reload() {
    var btn = $('#sites-reload'),
        list = $('#sites');

    // show loading
    btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
    list.html(TEMPLATES.run('loading'));

    send('site/get_sites').always(function() {
      btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
      list.html('');
    }).fail(function(r) {
      var error = r.responseText;

      try {
        var data = $.parseJSON(r.responseText);
        if (data.error)
          error = data.error;
      } catch (e) {}

      list.html(TEMPLATES.run('error', {
        error: error
      }));
    }).done(function(r) {
      list.html($.map(r, function(row) {
        var active = (row.is_active == '1');

        return TEMPLATES.run('site', $.extend({}, row, {
          q:   [row.site_id, row.slug, row.name, row.body].join('  ').toLowerCase(),
          badge_css: row.is_default ? '' : 'hidden',
        }));
      }).join(''));

      // refresh filters
      filter();
    });

    // stop event
    return false;
  }

  $('#sites-q').on('search-update', function() {
    filter();
  });

  $('#sites').on('click', 'a.list-group-item', function() {
    var site_id = $(this).data('site_id');

    // update highlight
    $('#sites .active').removeClass('active');
    $(this).addClass('active');

    // TODO
    // $('#site-edit-dialog').data('site_id', site_id).modal('show');
    alert('TODO: edit site ' + site_id);

    // stop event
    return false;
  });

  $('#sites-reload').click(reload);

  // load sites
  $('#settings-tab-sites').on('show.bs.tab', function() {
    reload();
  });
});