define([
	'dojo/_base/declare',
	'dojo/_base/lang',
	'dojo/dom-class',
	'dojo/topic',
	'dijit/_WidgetBase',
	'dijit/_TemplatedMixin',
	'dijit/_WidgetsInTemplateMixin',
	'./_ResizeMixin',
	'dojo/i18n!../nls/laboratory',
	'dojo/text!./templates/ColumnGrid.html',
	'dgrid/Grid',
	'dgrid/Editor',
	'dgrid/extensions/DijitRegistry',
	'dgrid/extensions/DnD',
	'dgrid/extensions/SingleQuery',
	'dstore/Memory',
	'dstore/Trackable',
	// Widgets in template:
	'dijit/form/Form',
	'dijit/form/Button',
	'dijit/form/TextBox'
], function (declare, lang, domClass, topic, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _ResizeMixin, i18n,
	template, Grid, Editor, DijitRegistry, DnD, SingleQuery, Memory, Trackable) {

	function renderDragSourceCell(item, value, node) {
		domClass.add(node, 'dojoDndHandle');
		node.innerHTML = '<i class="icon-navicon" title="' + i18n.dragToMove + '"></i>';
	}

	return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _ResizeMixin ], {
		baseClass: 'columnGridContainer',
		templateString: template,
		i18n: i18n,

		buildRendering: function () {
			this.inherited(arguments);

			this.store = new (declare([ Memory, Trackable ]))();

			this.grid = new (declare([ Grid, SingleQuery, Editor, DnD, DijitRegistry ], {
				columns: {
					dragSource: {
						label: '',
						renderCell: renderDragSourceCell,
						sortable: false
					},
					label: {
						field: 'label',
						label: i18n.label,
						autoSave: true,
						sortable: false
					},
					config: {
						label: '',
						formatter: function () {
							return '<i class="icon-times" title="' + i18n['delete'] + '"></i>' +
								'<i class="icon-gear" title="' + i18n.edit + '"></i> ';
						},
						sortable: false
					}
				},
				showHeader: false,
				dndParams: {
					withHandles: true
				}
			}))({
				collection: this.store,
				className: 'columnGrid dgrid-autoheight'
			}, this.gridNode);

			this._startupWidgets.push(this.grid);
		},

		postCreate: function () {
			this.inherited(arguments);
			this.own(
				this.store.on('add,delete,update', lang.hitch(this, '_onStoreChange')),
				this.grid.on('.icon-times:click', lang.hitch(this, 'removeColumn')),
				this.grid.on('.icon-gear:click', lang.hitch(this, '_editColumn')),
				topic.subscribe('/column/changed', lang.hitch(this, '_onColumnChange')),
				topic.subscribe('/columnConfig/hidden', lang.hitch(this, '_onFieldsHidden'))
			);
		},

		_getColumnsAttr: function () {
			return this.store.fetchSync();
		},

		addColumn: function (label) {
			// summary:
			//		Adds a column to the store with the given label;
			//		the column's field name will be based on the label provided
			this.store.put({
				field: label.replace(/[^\w-]/g, '_'),
				label: label
			});
		},

		removeColumn: function (target) {
			// summary:
			//		Removes the column from the store corresponding to the given target
			//		(whether an event, element, ID, or item)

			this.store.remove(this.grid.row(target).id);
		},

		_onFormSubmit: function (event) {
			// summary:
			//		Adds a column to the store from the UI values

			event.preventDefault();
			var form = this.columnGridForm;
			var value = form.get('value');

			if (!value.label) {
				return;
			}

			this.addColumn(value.label);

			form.reset();
			this.fieldLabelTextBox.focus();
		},

		_editColumn: function (event) {
			// summary:
			//		Shows the column configuration for a column

			var row = this.grid.row(event);

			// Let the ColumnEditor know that is should set the form data and display the form
			this.emit('editcolumn', { data: row.data });
		},

		_onColumnChange: function (value) {
			this.store.put(value);
		},

		_onStoreChange: function () {
			// Let the Laboratory know that it should update the demo display (grid or generated code)
			topic.publish('/configuration/changed');
			// Let the Tree config module know that is should update its list of column names
			topic.publish('/store/columns/update', this.store);
		},

		_onFieldsHidden: function (hiddenFieldNames) {
			this.store.forEach(function (columnConfig) {
				var k, updated;
				for (k in columnConfig) {
					if (hiddenFieldNames[k]) {
						delete columnConfig[k];
						updated = true;
					}
				}
				updated && this.store.put(columnConfig);
			}, this);
		}
	});
});