Ext.define("Ext.ux.icon.view.DataView", {
	extend: "Ext.view.View",
	alias: "widget.ux.icon.view.dataview",

	config: {
		search: null,
		searchBar: null,
		choiseBar: null,
		actionFn: Ext.emptyFn,
		choise: null
	},

	itemSelector: 'div.record-wrap',
	selectedItemCls: "x-ux-icon-selected-item",
	layout: "anchor",
	autoScroll: true,

	initComponent: function () {

		var i_self = this;
		i_self.store = i_self.createStore();
		i_self.tpl = i_self.createTemplate();
		i_self.callParent();
		i_self.createListeners();
		return i_self;
	},

	createListeners: function() {

		var i_self = this;
		i_self.on({
			afterrender: {
				fn: function(i_view) {

					var i_navigationModel = i_view.getNavigationModel();
					i_navigationModel.focusCls = "x-ux-icon-selected";
				}
			},
			itemdblclick: {
				fn: function(i_view, i_record) {
					var f_action = i_view.getActionFn();
					f_action(i_self.getPath(i_record));
				}
			},
			itemkeyup: {
				fn: function(i_view, i_record, i_item, n_index, i_event) {
					if (i_event.getKey() == Ext.event.Event.ENTER) {
						var f_action = i_view.getActionFn();
						f_action(i_self.getPath(i_record));
					}
				}
			}
		});
	},

	createTopBars: function() {

		var i_self = this;

		var i_searchBar = Ext.widget("toolbar", {
			itemId: "searchBar",
			items: [
				i_self.createSearch()
			],
			docked: "top"
		});

		var i_choiseBar = Ext.widget("toolbar", {
			itemId: "choiseBar",
			items: [
				i_self.createChoises()
			],
			docked: "top"
		});

		i_self.setSearchBar(i_searchBar);
		i_self.setChoiseBar(i_choiseBar);

		return [i_searchBar, i_choiseBar];
	},

	getPath: function(i_record) {

		var i_self = this;
		var i_radiogrp = i_self.getChoise();
		var o_value = i_radiogrp.getValue();

		return "/system/images/icons/extjs5/" + o_value.folder + "/16x16/" + i_record.get("icon") + ".png";
	},

	createChoises: function() {

		var i_self = this;

		var i_radiogrp = Ext.widget("radiogroup", {
			fieldLabel: ip2.i18n({
				da: "Udgave",
				en: "Choise"
			}),
			margin: "0 5 0 5",
			labelWidth: 50,
			columns: 4,
			vertical: false,
			flex: 1,
			itemId: "radiogrpchoises",
			items: [
				{
					boxLabel: ip2.i18n({
						da: "Sort",
						en: "Black"
					}),
					name: 'folder',
					inputValue: 'dark_gray',
					checked: true
				},
				{
					boxLabel: ip2.i18n({
						da: "Sort/blå",
						da: "Black/blue"
					}),
					name: 'folder',
					inputValue: 'blue_dark_gray'
				}

			],
			listeners: {
				afterrender: {
					fn: function(i_field) {
						i_field.labelEl.setStyle("vertical-align", "middle");
					}
				},
				change: {
					fn: function(i_field, s_newValue) {

						var i_searchField = i_self.getSearch();
						i_searchField.onSearch(i_searchField);
					}
				}
			}
		});

		i_self.setChoise(i_radiogrp);

		return i_radiogrp;
	},

	createTemplate: function() {

		var i_self = this;

		var i_template = new Ext.XTemplate(
			'<tpl for=".">',
				'<div style="',
					'width: 80px;',
					'float:left;',
					'padding: 5px 5px 5px 5px;',
					'margin: 5px 5px 5px 5px;',
					'" class="record-wrap">',
					'<div style="margin:auto;',
						'width: 32px;',
						'height: 32px;',
						'background-image: url(\'{[this.getUrl(values)]}\');',
						'background-position: center center;',
						'background-size: cover;">',
					'</div>',
					'<h3 style="',
						'font-size:12px;',
						'font-weight:normal;',
						'text-align:center;',
						'white-space: nowrap;',
						'width: 70px;',
						'text-overflow: ellipsis;',
						'overflow: hidden;',
						'margin:0;',
						'">{icon}',
					'</h3>',
				'</div>',
			'</tpl>',
			'<div class="x-clear"></div>',
			{
				getUrl: function(values) {

					var i_template = this;
					var i_radiogrp = i_template.dataview.getChoise();
					var o_value = i_radiogrp.getValue();
					return "/system/images/icons/extjs5/" + o_value.folder + "/32x32/" + values.icon + ".png";
				},
				dataview: i_self
			}
		);
		return i_template;
	},

	createSearch: function() {

		var i_self = this;

		var i_field = Ext.widget("textfield", {
			fieldLabel: ip2.i18n({
				da: "Søg",
				en: "Search"
			}),
			width: 300,
			labelWidth: 50,
			isFormField: false,
			enableKeyEvents: true,
			margin: "0 5 0 5",
			triggers: {
				clear: {
					cls: "x-form-clear-trigger",
					scope: "this",
					hidden: true,
					handler: "onClear"
				},
				search: {
					cls: "x-form-search-trigger",
					scope: "this",
					handler: "onSearch"
				}
			},
			onClear: function(i_field) {
				i_field.setValue("");
				i_field.onSearch(i_field);
			},
			onSearch: function(i_field) {

				var s_value = i_field.getValue();
				var i_trigger = i_field.getTrigger("clear");
				var i_store = i_self.getStore();

				i_trigger[s_value ? "show" : "hide"]();

				if (s_value) {
					i_store.loadPage(1);
				}
				else {
					i_store.loadRawData([]);
				}
			},
			listeners: {
				keydown: {
					fn: function(i_field, i_event) {
						if (i_event.keyCode == i_event.ENTER) {
							i_field.onSearch(i_field);
						}
					}
				}
			}
		});

		i_self.setSearch(i_field);
		return i_field;
	},

	createStore: function() {

		var i_self = this;

		var i_store = Ext.create("Ext.data.Store", {
			model: "Ext.ux.icon.view.model.DataView",
			autoLoad: false,
			pageSize: 100,
			listeners: {
				beforeload: {
					fn: function(i_store, i_operation) {

						var i_search = i_self.getSearch();
						var i_proxy = i_store.getProxy();
						var o_extraParams = i_proxy.getExtraParams();

						Ext.apply(o_extraParams, {
							action: "ip2navProxy.listIcons",
							search: i_search.getValue()
						});
					}
				}
			}
		});

		return i_store;
	}
});
