(function (context, $) {

  "use strict";

  context.JK = context.JK || {};

  // TODO: MUCH OF THIS CLASS IS REPEATED IN THE FOLLOWING FILES:
  // createSession.js.erb
  // accounts_profiles.js

  context.JK.BandSetupScreen = function (app) {
    var logger = context.JK.logger;
    var rest = context.JK.Rest();
    var friendSelectorDialog = null;
    var invitationDialog = null;
    var autoComplete = null;
    var userNames = [];
    var userIds = [];
    var userPhotoUrls = [];
    var selectedFriendIds = {};
    var nilOptionText = 'n/a';
    var bandId = '';

    function is_new_record() {
      return bandId.length == 0;
    }

    function removeErrors() {
      $('#band-setup-form .error-text').remove()
      $('#band-setup-form .error').removeClass("error")

    }

    function resetForm() {

      removeErrors();

      // name
      $("#band-name").val('');

      // country
      $("#band-country").empty();
      $("#band-country").val('');

      // region
      $("#band-region").empty();
      $("#band-region").val('');

      // city
      $("#band-city").empty();
      $("#band-city").val('');

      // description
      $("#band-biography").val('');

      // website
      $('#band-website').val('');

      resetGenres();

      $("#band-setup-step-1").show();
      $("#band-setup-step-2").hide();

      $('#band-invitee-input')
        .unbind('blur')
        .attr("placeholder", "Looking up friends...")
        .prop('disabled', true)
    }

    function resetGenres() {
      $('input[type=checkbox]:checked', '#band-genres').each(function (i) {
        $(this).removeAttr("checked");
      });

      var $tdGenres = $("#tdBandGenres");
    }

    function getSelectedGenres() {
      var genres = [];
      $('input[type=checkbox]:checked', '#band-genres').each(function (i) {
        var genre = $(this).val();
        genres.push(genre);
      });

      return genres;
    }

    function validateGeneralInfo() {
      removeErrors();

      var band = buildBand();

      return rest.validateBand(band);
    }

    function renderErrors(errors) {
      var name        = context.JK.format_errors("name", errors);
      var country     = context.JK.format_errors("country", errors);
      var state       = context.JK.format_errors("state", errors);
      var city        = context.JK.format_errors("city", errors);
      var biography   = context.JK.format_errors("biography", errors);
      var genres      = context.JK.format_errors("genres", errors);
      var website     = context.JK.format_errors("website", errors);

      if(name) $("#band-name").closest('div.field').addClass('error').end().after(name);
      if(country) $("#band-country").closest('div.field').addClass('error').end().after(country);
      if(state) $("#band-region").closest('div.field').addClass('error').end().after(state);
      if(city) $("#band-city").closest('div.field').addClass('error').end().after(city);
      if(genres) $(".band-setup-genres").closest('div.field').addClass('error').end().after(genres);
      if(biography) $("#band-biography").closest('div.field').addClass('error').end().after(biography);
      if(website) $("#band-website").closest('div.field').addClass('error').end().after(website);
    }

    function buildBand() {
      var band = {};
      band.name = $("#band-name").val();
      band.website = $("#band-website").val();
      band.biography = $("#band-biography").val();
      band.city = $("#band-city").val();
      band.state = $("#band-region").val();
      band.country = $("#band-country").val();
      band.genres = getSelectedGenres();
      return band;
    }

    function saveBand() {
      var band = buildBand()

      if (is_new_record()) {
        rest.createBand(band)
          .done(function (response) {
            createBandInvitations(response.id, function () {
              context.location = "/client#/bandProfile/" + response.id;
            });
          })
          .fail(function (jqXHR) {
            app.notifyServerError(jqXHR, "Unable to create band")
          });
        ;
      }
      else {
        band.id = bandId;
        rest.updateBand(band)
          .done(function (response) {
            createBandInvitations(band.id, function () {
              context.location = "/client#/bandProfile/" + band.id;
            });
          })
          .fail(function (jqXHR) {
            app.notifyServerError(jqXHR, "Unable to create band")
          });
      }
    }

    function createBandInvitations(bandId, onComplete) {
      var callCount = 0;
      var totalInvitations = 0;
      $('#selected-band-invitees .invitation').each(function (index, invitation) {
        callCount++;
        totalInvitations++;
        var userId = $(invitation).attr('user-id');
        rest.createBandInvitation(bandId, userId)
          .done(function (response) {
            callCount--;
          }).fail(app.ajaxError);
      });

      function checker() {
        if (callCount === 0) {
          onComplete();
        } else {
          context.setTimeout(checker, 10);
        }
      }

      checker();
      return totalInvitations;
    }

    function beforeShow(data) {
      userNames = [];
      userIds = [];
      userPhotoUrls = [];
      bandId = data.id == 'new' ? '' : data.id;
      resetForm();
    }

    function afterShow(data) {
      friendSelectorDialog.setCallback(friendSelectorCallback);
      loadFriends();

      if (!is_new_record()) {
        $("#band-setup-title").html("edit band");
        $("#btn-band-setup-save").html("SAVE CHANGES");
        $("#band-change-photo").html('Upload band photo.');
        $('#tdBandPhoto').css('visibility', 'visible');

        // retrieve and initialize band profile data points
        loadBandDetails();
      }
      else {
        loadGenres();

        rest.getResolvedLocation()
          .done(function (location) {
            loadCountries(location.country, function () {
              loadRegions(location.region, function () {
                loadCities(location.city);
              });
            });
          });


        $("#band-setup-title").html("set up band");
        $("#btn-band-setup-save").html("CREATE BAND");
        $('#tdBandPhoto').css('visibility', 'hidden'); // can't upload photo when going through initial setup
      }
    }

    function loadBandDetails() {
      rest.getBand(bandId).done(function (band) {
        $("#band-name").val(band.name);
        $("#band-website").val(band.website);
        $("#band-biography").val(band.biography);

        if (band.photo_url) {
          $("#band-avatar").attr('src', band.photo_url);
        }

        loadGenres(band.genres);

        loadCountries(band.country, function () {
          loadRegions(band.state, function () {
            loadCities(band.city);
          });
        });

        // TODO: initialize avatar
      });
    }

    // TODO: this is repeated in createSession.js.erb
    function loadFriends() {
      rest.getFriends({ id: context.JK.currentUserId })
        .done(function (friends) {
          $.each(friends, function () {
            userNames.push(this.name);
            userIds.push(this.id);
            userPhotoUrls.push(this.photo_url);
          });

          var autoCompleteOptions = {
            lookup: { suggestions: userNames, data: userIds },
            onSelect: addInvitation
          };

          $('#band-invitee-input').attr("placeholder", "Type a friend\'s name").prop('disabled', false);

          if (!autoComplete) {
            autoComplete = $('#band-invitee-input').autocomplete(autoCompleteOptions);
          }
          else {
            autoComplete.setOptions(autoCompleteOptions);
          }

          $(".autocomplete").width("150px");
        })
        .fail(function () {
          $('#band-invitee-input').attr("placeholder", "Unable to lookup friends");
          app.ajaxError(arguments)
        });
    }

    function loadGenres(selectedGenres) {
      $("#band-genres").empty();

      rest.getGenres().done(function (genres) {
        $.each(genres, function (index, genre) {
          var genreTemplate = $('#template-band-setup-genres').html();
          var selected = '';

          if (selectedGenres) {
            var genreMatch = $.grep(selectedGenres, function (n, i) {
              return n.id === genre.id;
            });

            if (genreMatch.length > 0) {
              selected = "checked";
            }
          }
          var genreHtml = context.JK.fillTemplate(genreTemplate, {
            id: genre.id,
            description: genre.description,
            checked: selected
          });

          $('#band-genres').append(genreHtml);
        });
      });
    }

    function loadCountries(initialCountry, onCountriesLoaded) {
      var $country = $("#band-country");

      var nilOption = $('<option value=""></option>');
      nilOption.text(nilOptionText);
      $country.append(nilOption);

      rest.getCountries().done(function (response) {
        $.each(response["countries"], function (index, country) {
          if (!country) return;
          var option = $('<option></option>');
          option.text(country);
          option.attr("value", country);

          if (initialCountry === country) {
            option.attr("selected", "selected");
          }

          $country.append(option);
        });

        context.JK.dropdown($country);

        if (onCountriesLoaded) {
          onCountriesLoaded();
        }
      });
    }

    function loadRegions(initialRegion, onRegionsLoaded) {
      var $region = $("#band-region");
      $region.empty();
      var selectedCountry = $("#band-country").val();

      var nilOption = $('<option value=""></option>');
      nilOption.text(nilOptionText);
      $region.append(nilOption);

      if (selectedCountry) {
        rest.getRegions({'country': selectedCountry}).done(function (response) {
          $.each(response["regions"], function (index, region) {
            if (!region) return;
            var option = $('<option></option>');
            option.text(region);
            option.attr("value", region);

            if (initialRegion === region) {
              option.attr("selected", "selected");
            }

            $region.append(option);
          });


          context.JK.dropdown($region);

          if (onRegionsLoaded) {
            onRegionsLoaded();
          }
        });
      }
    }

    function loadCities(initialCity) {
      var $city = $("#band-city");
      $city.empty();
      var selectedCountry = $("#band-country").val();
      var selectedRegion = $("#band-region").val();

      var nilOption = $('<option value=""></option>');
      nilOption.text(nilOptionText);
      $city.append(nilOption);

      if (selectedCountry && selectedRegion) {
        rest.getCities({'country': selectedCountry, 'region': selectedRegion}).done(function (response) {
          $.each(response["cities"], function (index, city) {
            if (!city) return;
            var option = $('<option></option>');
            option.text(city);
            option.attr("value", city);

            if (initialCity === city) {
              option.attr("selected", "selected");
            }

            $city.append(option);
          });

          context.JK.dropdown($city);
        });
      }
    }

    function friendSelectorCallback(newSelections) {
      var keys = Object.keys(newSelections);
      for (var i = 0; i < keys.length; i++) {
        addInvitation(newSelections[keys[i]].userName, newSelections[keys[i]].userId);
      }
    }

    function addInvitation(value, data) {
      if ($('#selected-band-invitees div[user-id=' + data + ']').length === 0) {
        var template = $('#template-band-invitation').html();
        var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});
        $('#selected-band-invitees').append(invitationHtml);
        $('#band-invitee-input').select();
        selectedFriendIds[data] = true;
      }
      else {
        $('#band-invitee-input').select();
        context.alert('Invitation already exists for this musician.');
      }
    }

    function navigateToBandPhoto(evt) {
        evt.stopPropagation();
        context.location = '/client#/band/setup/photo/' + bandId;
        return false;
    }
    
    function removeInvitation(evt) {
      delete selectedFriendIds[$(evt.currentTarget).parent().attr('user-id')];
      $(evt.currentTarget).closest('.invitation').remove();
    }

    function events() {
      $('#selected-band-invitees').on("click", ".invitation a", removeInvitation);

      // friend input focus
      $('#band-invitee-input').focus(function () {
        $(this).val('');
      });

      $('#btn-band-setup-cancel').click(function () {
        resetForm();
        window.history.go(-1);
        return false;
      });

      $('#btn-band-setup-next').click(function () {
        validateGeneralInfo()
          .done(function (response) {
            $("#band-setup-step-2").show();
            $("#band-setup-step-1").hide();
          })
          .fail(function (jqXHR) {
            if(jqXHR.status == 422) {
              renderErrors(JSON.parse(jqXHR.responseText))
            }
            else {
              app.notifyServerError(jqXHR, "Unable to validate band")
            }
          });
      });

      $('#btn-band-setup-back').click(function () {
        $("#band-setup-step-1").show();
        $("#band-setup-step-2").hide();
      });

      $('#btn-band-setup-save').click(saveBand);

      $('#btn-band-choose-friends').click(function () {
        friendSelectorDialog.showDialog(selectedFriendIds);
      });

      $('#band-country').on('change', function (evt) {
        evt.stopPropagation();
        loadRegions();
        loadCities();
        return false;
      });

      $('#band-region').on('change', function (evt) {
        evt.stopPropagation();
        loadCities();
        return false;
      });

      $('#band-change-photo').click(navigateToBandPhoto);
      $('#band-setup .avatar-profile').click(navigateToBandPhoto);

      $('div[layout-id="band/setup"] .btn-email-invitation').click(function () {
        invitationDialog.showEmailDialog();
      });

      $('div[layout-id="band/setup"] .btn-gmail-invitation').click(function () {
        invitationDialog.showGoogleDialog();
      });

      $('div[layout-id="band/setup"] .btn-facebook-invitation').click(function () {
        invitationDialog.showFacebookDialog();
      });
    }

    function initialize(invitationDialogInstance, friendSelectorDialogInstance) {
      friendSelectorDialog = friendSelectorDialogInstance;
      invitationDialog = invitationDialogInstance;
      events();

      var screenBindings = {
        'beforeShow': beforeShow,
        'afterShow': afterShow
      };

      app.bindScreen('band/setup', screenBindings);
    }

    this.initialize = initialize;
    this.afterShow = afterShow;
    return this;
  };

})(window, jQuery);