/*
 * Copyright (c) 2012-2014 Kaarle Ritvanen
 * See LICENSE file for license details
 */

define(
    [
	"acf2/dom",
	"acf2/statusbar",
	"acf2/type",
	"acf2/widget/abstract/fields",
	"jquery",
	"underscore",
	"jquery-ui/sortable"
    ],
    function(dom, statusBar, type, Base, $, _) {
	return Base.extend({
	    wrap: function() { return $("<div>").html(this.el); },
	    
	    render: function(data, meta) {
		this.div = $("<div>");

		Base.render.call(this, data, meta);

		this.el.append(this.div);	

		if (meta.editable &&
		    _.contains(["collection", "list"], meta.type)) {
		    if (!this.table) this.makeSortable(this.div);

		    var self = this;
		    var keys = _.clone(_.keys(data.data));

		    var button = dom.button("Insert", function() {
			
			var getter, row;

			function insert() {
			    var name = getter();

			    if (_.contains(keys, name)) {
				statusBar.setError("Already exists: " + name);
				return;
			    }
			    keys.push(name);

			    data.set(
				name, type.isTreeNode(meta.members) ? {} : null
			    ).done(function(txnValid) {
				if (_.isObject(meta.removable))
				    meta.removable = [];
				meta.removable.push(name);

				self.renderCollectionMember(name, meta);
				if (row) row.remove();
				button.prop("class", null);
				statusBar.validationReady(txnValid);
			    }).fail(function(xhr) {
				statusBar.setError(
				    self.formatValidationError(xhr)
				);
				data.delete(name);
			    });
			}

			button.prop("class", "hidden");
			
			if (meta.type == "collection") {
			    var field = $("<input>").attr({type: "text"})
				.change(insert);
			    row = $("<tr>").html($("<td>").html(field));
			    getter = function() { return field.val(); }
			    self.appendRow(row);
			    field.focus();
			}
			else {
			    getter = function() {
				return data.data.length + 1;
			    };
			    insert();
			}
		    });
		    this.el.append($("<p>").html(button));
		}
	    },

	    addActionButton: function(label, action) {
		this.div.append(dom.button(label, action));
	    },

	    appendWidget: function(el, label) {
		var self = this;
		var description = el.data("description");

		var labelTd = $("<td>").text(label);
		el.on("hasDetails", function(event, path) {
		    labelTd.html(dom.objectRef(path).text(label));
		    el.on("statusChanged", function(event, status) {
			dom.setStatus(labelTd, status);
			event.stopPropagation();			
		    });
		    event.stopPropagation();
		});

		el = dom.makeRow(el);

		if (el.is("tr")) {
		    el.prepend(labelTd);
		    if (description) el.append($("<td>").text(description));
		    this.appendRow(el);
		}
		else {
		    if (el.is("table")) {
			this.makeSortable(el.find("tbody"));
			var tr;
			el.find("tr").each(function(index, row) {
			    tr = $(row);
			    tr.prepend($("<td>"));
			});
			tr.children().first().remove();
			tr.prepend(labelTd);
			this.table = el;
		    }
		    else this.table = null;
		    this.div.append(el);
		}

		return el;
	    },

	    appendRow: function(row) {
		if (!this.table) {
		    this.table = this.makeSortable($("<tbody>"));
		    this.div.append($("<table>").html(this.table));
		}
		this.table.append(row);
	    },

	    makeSortable: function(el) {
		var data = this.reqData;

		if (data.meta.type == "list" && data.meta.editable)
		    el.sortable({
			start: function(event, ui) {
			    $(":focus").change();
			    ui.item.data("index", ui.item.index());
			},
			stop: function(event, ui) {
			    var oldIndex = ui.item.data("index") + 1;
			    var newIndex = ui.item.index() + 1;
			    if (newIndex != oldIndex)
				data.move(oldIndex, newIndex)
				.done(function(txnValid) {
				    $("#content").trigger("reload", [txnValid]);
				});
			}
		    });
		return el;
	    }
	});
    }
);