jQuery(function($) {
  "use strict";
  var TEMPLATES = new LuigiTemplate.Cache({
    user: [
      "<a ",
        "href='#' ",
        "class='list-group-item %{css|h}' ",
        "title='Edit user \"%{user_name|h}\".' ",
        "data-row='%{row|json|h}' ",
      ">",
        "<i class='fa fa-fw fa-spinner fa-spin hidden loading'></i>",
        "<i class='fa fa-fw fa-user loading'></i>",

        " ",

        "%{user_name|h}",
      "</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: %{responseText|h}",
      "</span>",
    ],
  });

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

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

    send('test/get_users').always(function() {
      btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
      list.html('');
    }).fail(function(r) {
      console.log('get_users failed: ' + r.responseText);
      list.html(TEMPLATES.run('error', r));
    }).done(function(r) {
      list.html($.map(r.users, function(row) {
        return TEMPLATES.run('user', $.extend({}, row, {
          row: row,
        }));
      }).join(''));
    });

    // stop event
    return false;
  }

  function set_user(user_id) {
    return send('test/set_user', {
      user_id: user_id,
    }).fail(function(r) {
      alert('Error ' + r.responseText);
    }).done(function(r) {
      // do nothing
    });
  }

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

    // update highlight
    $('#users .active').removeClass('active');
    me.addClass('active');

    $('#edit-dialog').data('row', me.data('row')).modal('show');

    // stop event
    return false;
  });

  $('#add-dialog').on('show.bs.modal', function() {
    $.each(['name', 'email', 'password'], function(i, id) {
      $('#add-' + id).val('');
    });
    $('#add-role').val('guest');
  });

  $('#add-dialog').on('shown.bs.modal', function() {
    $('#add-name').focus();
  });

  $('#add-name, #add-email, #add-password').keydown(function(ev) {
    if (ev.which == 13) {
      setTimeout(function() {
        $('#add-confirm').click();
      }, 10);

      // stop event
      return false;
    }
  });

  $('#add-confirm').click(function() {
    var me = $(this);

    if (me.hasClass('disabled'))
      return false;

    // toggle loading
    me.toggleClass('disabled').find('.loading').toggleClass('hidden');

    send('test/add_user', {
      name:     $('#add-name').val(),
      email:    $('#add-email').val(),
      password: $('#add-password').val(),
      role:     $('#add-role').val(),
      active:   't',
    }).always(function() {
      // toggle loading
      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
    }).fail(function(r) {
      alert('Error ' + r.responseText);
    }).done(function(r) {
      console.log(r);
      reload();
      $('#add-dialog').modal('hide');
    });

    // stop event
    return false;
  });

  $('#edit-dialog').on('show.bs.modal', function() {
    var row = $(this).data('row');

    $.each({
      name:   'user_name',
      email:  'email',
      role:   'role_name',
    }, function(id, col) {
      $('#edit-' + id).val(row[col]);
    });
  });

  $('#edit-dialog').on('shown.bs.modal', function() {
    $('#edit-name').focus();
  });

  $('#edit-dialog').on('hide.bs.modal', function() {
    // clear highlight
    $('#users .active').removeClass('active');
  });

  $('#edit-name, #edit-email').keydown(function(ev) {
    if (ev.which == 13) {
      setTimeout(function() {
        $('#edit-confirm').click();
      }, 10);

      // stop event
      return false;
    }
  });

  $('#edit-confirm').click(function() {
    var me = $(this),
        user_id = $('#edit-dialog').data('row').user_id;

    if (me.hasClass('disabled'))
      return false;

    // toggle loading
    me.toggleClass('disabled').find('.loading').toggleClass('hidden');

    send('test/edit_user', {
      user_id:  user_id,
      name:     $('#edit-name').val(),
      email:    $('#edit-email').val(),
      role:     $('#edit-role').val(),
    }).always(function() {
      // toggle loading
      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
    }).fail(function(r) {
      alert('Error ' + r.responseText);
    }).done(function(r) {
      console.log(r);
      reload();
      $('#edit-dialog').modal('hide');
    });

    // stop event
    return false;
  });

  $('#login').click(function() {
    var me = $(this);

    if (me.hasClass('disabled'))
      return false;

    // toggle loading
    me.toggleClass('disabled').find('.loading').toggleClass('hidden');

    send('test/login', {
      email:    $('#login-email').val(),
      password: $('#login-password').val(),
    }).always(function() {
      // toggle loading
      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
    }).fail(function(r) {
      alert('Error ' + r.responseText);
    }).done(function(r) {
      console.log(r);
    });

    // stop event
    return false;
  });

  $('#login-user, #login-password').keydown(function(ev) {
    if (ev.which == 13) {
      setTimeout(function() {
        // trigger login
        $('#login').click();
      }, 10);

      // stop event
      return false;
    }
  });

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

  // load users
  reload();
});