/** @jsx React.DOM */

(function($) {
  // Console-polyfill. MIT license.
  // https://github.com/paulmillr/console-polyfill
  // Make it safe to do console.log() always.
  var console = (function (con) {
    'use strict';
    var prop, method;
    var empty = {};
    var dummy = function() {};
    var properties = 'memory'.split(',');
    var methods = ('assert,count,debug,dir,dirxml,error,exception,group,' +
       'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' +
       'time,timeEnd,trace,warn').split(',');
    while (prop = properties.pop()) con[prop] = con[prop] || empty;
    while (method = methods.pop()) con[method] = con[method] || dummy;
    return con;
  })(window.console || {});

  var Neopia = {
    User: {
      get: function(id) {
        return $.getJSON(Neopia.API_URL + "/users/" + id).then(function(response) {
          return response.users[0];
        });
      }
    },
    Customization: {
      request: function(petId, type) {
        return $.ajax({
          dataType: "json",
          type: type,
          url: Neopia.API_URL + "/pets/" + petId + "/customization"
        });
      },
      get: function(petId) {
        return this.request(petId, "GET");
      },
      post: function(petId) {
        return this.request(petId, "POST");
      }
    },
    init: function() {
      var hostEl = $('meta[name=neopia-host]');
      if (!hostEl.length) {
        throw "missing neopia-host meta tag";
      }
      var host = hostEl.attr('content');
      if (!host) {
        throw "neopia-host meta tag exists, but is empty";
      }
      Neopia.API_URL = "http://" + host + "/api/1";
    }
  };

  var Modeling = {
    _customizationsByPetId: {},
    _customizations: [],
    _itemsById: {},
    _items: [],
    _addCustomization: function(customization) {
      // Set all equipped, interesting items' statuses as success and cross
      // them off the list.
      var itemsById = this._itemsById;
      var equippedByZone = customization.custom_pet.equipped_by_zone;
      var closetItems = customization.closet_items;
      Object.keys(equippedByZone).forEach(function(zoneId) {
        var equippedClosetId = equippedByZone[zoneId].closet_obj_id;
        var equippedObjectId = closetItems[equippedClosetId].obj_info_id;
        if (itemsById.hasOwnProperty(equippedObjectId)) {
          // TODO: i18n title
          customization.statusByItemId[equippedObjectId] = "success";
          itemsById[equippedObjectId].el.find("span[data-body-id=" +
            customization.custom_pet.body_id + "]").addClass("modeled")
            .attr("title", "You just finished modeling this—thanks so much!");
        }
      });
      this._customizationsByPetId[customization.custom_pet.name] = customization;
      this._customizations = this._buildCustomizations();
      this._update();
    },
    _addNewCustomization: function(customization) {
      customization.loadingForItemId = null;
      customization.statusByItemId = {};
      this._addCustomization(customization);
    },
    _buildCustomizations: function() {
      var modelCustomizationsByPetId = this._customizationsByPetId;
      return Object.keys(modelCustomizationsByPetId).map(function(petId) {
        return modelCustomizationsByPetId[petId];
      });
    },
    _createItems: function($) {
      var itemsById = this._itemsById;
      this._items = $('#newest-unmodeled-items li').map(function() {
        var el = $(this);
        var item = {
          el: el,
          id: el.attr('data-item-id'),
          name: el.find('h2').text(),
          missingBodyIdsPresenceMap: el.find('span[data-body-id]').toArray().reduce(function(map, node) {
            map[$(node).attr('data-body-id')] = true;
            return map;
          }, {})
        };
        item.component = React.renderComponent(<ModelForItem item={item} />,
                                               el.find('.models').get(0));
        itemsById[item.id] = item;
        return item;
      }).toArray();
    },
    _loadPetCustomization: function(neopiaPetId) {
      return Neopia.Customization.get(neopiaPetId)
        .done(this._addNewCustomization.bind(this))
        .fail(function() {
          console.error("couldn't load pet %s", neopiaPetId);
        });
    },
    _loadManyPetsCustomizations: function(neopiaPetIds) {
      return neopiaPetIds.map(this._loadPetCustomization.bind(this));
    },
    _loadUserCustomizations: function(neopiaUserId) {
      return Neopia.User.get(neopiaUserId).then(function(neopiaUser) {
        return neopiaUser.links.pets;
      }).then(this._loadManyPetsCustomizations.bind(this)).fail(function() {
        console.error("couldn't load user %s's customizations", neopiaUserId);
      });
    },
    _loadManyUsersCustomizations: function(neopiaUserIds) {
      return neopiaUserIds.map(this._loadUserCustomizations.bind(this));
    },
    _startLoading: function(neopiaPetId, itemId) {
      var customization = this._customizationsByPetId[neopiaPetId];
      customization.loadingForItemId = itemId;
      customization.statusByItemId[itemId] = "loading";
      this._update();
    },
    _stopLoading: function(neopiaPetId, itemId, status) {
      var customization = this._customizationsByPetId[neopiaPetId];
      customization.loadingForItemId = null;
      customization.statusByItemId[itemId] = status;
      this._update();
    },
    _update: function() {
      var customizations = this._customizations;
      this._items.forEach(function(item) {
        var filteredCustomizations = customizations.filter(function(c) {
          return item.missingBodyIdsPresenceMap[c.custom_pet.body_id];
        });
        item.component.setState({customizations: filteredCustomizations});
      });
    },
    init: function($) {
      Neopia.init();
      this._createItems($);
      // TODO: use user prefs, silly!
      var search = document.location.search;
      var users = search.indexOf('=') >= 0 ? search.split('=')[1].split(',') : '';
      this._loadManyUsersCustomizations(users);
    },
    model: function(neopiaPetId, itemId) {
      var oldCustomization = this._customizationsByPetId[neopiaPetId];
      var itemsById = this._itemsById;
      this._startLoading(neopiaPetId, itemId);
      return Neopia.Customization.post(neopiaPetId)
        .done(function(newCustomization) {
          // Add this field as null for consistency.
          newCustomization.loadingForItemId = null;

          // Copy previous statuses.
          newCustomization.statusByItemId = oldCustomization.statusByItemId;

          // Set the attempted item's status as unworn (to possibly be
          // overridden by the upcoming loop in _addCustomization).
          newCustomization.statusByItemId[itemId] = "unworn";

          // Now, finally, let's overwrite the old customization with the new.
          Modeling._addCustomization(newCustomization);
        })
        .fail(function() {
          Modeling._stopLoading(neopiaPetId, itemId, "error");
        });
    }
  };

  var ModelForItem = React.createClass({
    getInitialState: function() {
      return {customizations: []};
    },
    render: function() {
      var item = this.props.item;
      function createModelPet(customization) {
        return <ModelPet customization={customization}
                         item={item}
                         key={customization.custom_pet.name} />;
      }
      var sortedCustomizations = this.state.customizations.sort(function(a, b) {
        var aName = a.custom_pet.name.toLowerCase();
        var bName = b.custom_pet.name.toLowerCase();
        if (aName < bName) return -1;
        if (aName > bName) return 1;
        return 0;
      });
      return <ul>{sortedCustomizations.map(createModelPet)}</ul>;
    }
  });

  var ModelPet = React.createClass({
    render: function() {
      var petName = this.props.customization.custom_pet.name;
      var status = this.props.customization.statusByItemId[this.props.item.id];
      var loadingForItemId = this.props.customization.loadingForItemId;
      var disabled = (status === "loading"
                   || status === "success");
      if (loadingForItemId !== null && loadingForItemId !== this.props.item.id) {
        disabled = true;
      }
      var itemName = this.props.item.name;
      var imageSrc = "http://pets.neopets.com/cpn/" + petName + "/1/1.png";
      // TODO: i18n
      var title = "Submit " + petName + " as a model, especially if they're " +
                  "wearing the " + itemName + "!";
      if (status === "success") {
        var statusMessage = "Thanks! <3";
      } else if (status === "unworn") {
        var statusMessage = "Not wearing this item.";
      } else if (status === "error") {
        var statusMessage = "Couldn't load. Try again?";
      } else {
        var statusMessage ="";
      }
      return <li data-status={status}><button onClick={this.handleClick} title={title} disabled={disabled}>
        <img src={imageSrc} />
        <div>
          <span className="pet-name">{petName}</span>
          <span className="message">{statusMessage}</span>
        </div>
      </button></li>;
    },
    handleClick: function(e) {
      Modeling.model(this.props.customization.custom_pet.name, this.props.item.id);
    }
  });

  Modeling.init($);
})(jQuery);