/*
 *  Copyright 2015 Anyware Services
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

/**
 * This step of {@link Ametys.plugins.web.page.AddPageWizard} wizard allow to choose type of page.
 */
Ext.define("Ametys.plugins.web.page.AddPageWizard.PageTypeCard", {
	
	extend: "Ametys.plugins.web.page.AddPageWizard.Card",
    
    name: "type",
	
    /** 
     * @private
     * @property {String} _lastExpandedPanel The name of the panel that was expanded the last time (between the template one, the redirection one and the blank one)
     */

	_lastExpandedPanel: 'add-page-pagetype-template',

	/**
	 * @private
	 * @property {Object} _model The card model
	 */

    /**
     * @private
     * @property {Object} _selectPageConf Parameters passed when creating Ametys.web.form.widget.SelectPage
     */
    _selectPageConf: {},
	
	constructor: function(config)
	{
		this.callParent(arguments);
		this._model = {};
        this._selectPageConf = Ext.apply(this._selectPageConf, config.selectPageConf);
	},
		
	/**
	 * Creates the card panel
	 * @return {Ext.Component} the created card panel
	 */
	createPanel: function ()
	{
		this._cardPanel = Ext.create('Ext.Container', {
		    border: false,
		    layout: {
		        type: 'accordion',
		        fill: false
		    },
		    scrollable: 'vertical',
		    
		    defaults: {
		    	cls: "a-radio-panel",
		    	ui: 'light',
		    	border: false,
		    	margin: '0 10 0 0',
		    	listeners: {
			    	expand: Ext.bind(this._onAfterExpand, this)
				}
		    },
		    
		    items: [
		          this._createSelectTemplatePanel4SelectPageTypeCard(), // Container page
		          this._createSitemapRedirection4SelectPageTypeCard(), // Link page
		          this._createExternalLinkRedirectionPanel4SelectPageTypeCard(), // Link page (web)
		          this._createBlankPagePanel4SelectPageTypeCard() // Node page
		    ]
		});

		return this._cardPanel;
	},
	
	apply: function (fullModel, callback)
	{
		var pageId = fullModel["page-id"];
		
		if (fullModel["page-type"] == "template")
		{
			var template = fullModel["template"];
			
			Ametys.web.page.PageDAO.setTemplate ([[pageId], template], this._applyTemplateCb, {scope: this, arguments: [callback], waitMessage: {msg: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['template-wait-message'], target: this.getUI().ownerCt}});
		}
		else if (fullModel["page-type"] == "redirection-http" || fullModel["page-type"] == "redirection-cms")
		{
			var redirectionType = fullModel["page-type"] == "redirection-cms" ? "PAGE" : "WEB";
			var redirectTo = fullModel[fullModel["page-type"]];
			
			if (pageId == redirectTo)
			{
				Ametys.Msg.show({
		            title: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['link-error-title'],
		            msg: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['link-error-message'],
		            buttons: Ext.Msg.OK,
		            icon: Ext.MessageBox.ERROR
		        });
				return;
			}
			
			Ametys.web.page.PageDAO.setLink ([[pageId], redirectTo, redirectionType], this._setLinkCb, {scope: this, arguments: [callback], waitMessage: {msg: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['link-wait-message'], target: this.getUI().ownerCt}});
		}
		else
		{
			Ametys.web.page.PageDAO.setBlank ([[pageId]], this._setBlankCb, {scope: this, arguments: [callback], waitMessage: {msg: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['blank-wait-message'], target: this.getUI().ownerCt}});
		}
	},
	
	/**
	 * @private
	 * Callback function called after setting template page
	 * @param {Object} response the object response
	 * @param {String[]} response.success the id of updated pages
	 * @param {String} response.zonename the zone name
	 * @param {Object[]} args the callback arguments
	 */
	_applyTemplateCb: function (response, args)
	{
		args[0](true);
	},
	
	/**
	 * @private
	 * Callback function called after setting page as redirection
	 * @param {Object} response the object response
	 * @param {Object[]} args the callback arguments
	 */
	_setLinkCb: function (response, args)
	{
		args[0](true);
	},
	
	/**
	 * @private
	 * Callback function called after page as blank page
	 * @param {Object} response the object response
	 * @param {Object[]} args the callback arguments
	 */
	_setBlankCb: function (response, args)
	{
		args[0](true);
	},
	
	getUI: function ()
	{
		return this._cardPanel;
	},
	
	resetModel: function (callback)
	{
		this._model = {};
		this._model["page-type"] = Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-pagetype');
		this._model["template"] = Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-template');
		this._model["zone"] = Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-zone');
		this._model["redirection-http"] = "http://";
		this._model["redirection-cms"] = "";
		
	    callback();
	},
	
	updateUI: function(callback)
	{
        var pageType = this._model["page-type"]
                        || Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-pagetype')
                        || Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-selected-pagetype');
        this._cardPanel.down("*[itemId='add-page-pagetype-" + pageType + "']").expand();

		var fullModel = Ametys.plugins.web.page.AddPageWizard.getModel();
		
        var templateView = this._cardPanel.down("*[itemId='add-page-pagetype-template-view']");
        
		// is store loaded for the right page?
		if (this._displayingValuesForPageId == Ametys.plugins.web.page.AddPageWizard.getParentId() + "###" + fullModel["title"])
		{
            var template = this._model["template"]
                            || Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-template')
                            || Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-selected-template');

            var index = templateView.getStore().find('id', template);
			if (index != -1)
			{
				templateView.getSelectionModel().select(index);
			}
			else
			{
				templateView.getSelectionModel().select(0);
			}
			this._scrollMultiselectToSelection(templateView);
            
            // Default values
	        this._model["page-type"] = "template";
	        var selectedRecord = templateView.getSelectionModel().getSelection()[0];
	        this._model["template"] = selectedRecord != null ? selectedRecord.getId() : null;
	        this._model["zone"] = selectedRecord != null ? selectedRecord.get('zone') : null;
            this._cardPanel.down("*[itemId='add-page-pagetype-template-view']").focus();
            callback(true);
		}
		else
		{
			this._displayingValuesForPageId = Ametys.plugins.web.page.AddPageWizard.getParentId() + "###" + fullModel["title"];
			
			// Load available templates for page
			templateView.getStore().load({
				params: {'parentId': Ametys.plugins.web.page.AddPageWizard.getParentId(), title: fullModel["title"]},
				callback: Ext.bind(this._templateCB4updateUI, this, [callback], 1)
			});
		}
		
		this._cardPanel.down("*[itemId='add-page-pagetype-redirection-http-field']").setValue(this._model["redirection-http"]);
        this._cardPanel.down("*[itemId='add-page-pagetype-redirection-cms-field']").suspendEvent('change');
		this._cardPanel.down("*[itemId='add-page-pagetype-redirection-cms-field']").setValue(this._model["redirection-cms"], true);
        this._cardPanel.down("*[itemId='add-page-pagetype-redirection-cms-field']").resumeEvent('change');
	},
	
	/**
	 * Callback function after loading available templates
	 * @param {Ext.data.Model[]} records The loaded records
	 * @param {Function} callback The function to callback after the operation
     * @param {boolean} callback.success True if the operation was a success
	 */
	_templateCB4updateUI: function(records, callback)
	{
		// Ametys.plugins.web.page.AddPageWizard._box.hideWaitMsg();
		
		var currentTemplate = this._model["template"]
                                || Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-template')
                                || Ametys.plugins.web.page.AddPageWizard.getInitialConfig('default-selected-template');

        this._model["template"] = "";
		this._model["zone"] = "";
		
		var templateView = this._cardPanel.down("*[itemId='add-page-pagetype-template-view']");
		var store = templateView.getStore();
		
		if (store.find('id', currentTemplate) != -1)
		{
			templateView.getSelectionModel().select(store.find('id', currentTemplate));
		}
		else
		{
			templateView.getSelectionModel().select(0);
		}
		
		this._scrollMultiselectToSelection(templateView);
		
        // Default values
        this._model["page-type"] = "template";
        var selectedRecord = templateView.getSelectionModel().getSelection()[0];
        this._model["template"] = selectedRecord != null ? selectedRecord.getId() : null;
        this._model["zone"] = selectedRecord != null ? selectedRecord.get('zone') : null;
        this._cardPanel.down("*[itemId='add-page-pagetype-template-view']").focus();
            
        callback(true);
	},
	
	isModelOk: function(fullModel)
	{
		var templateView = this._cardPanel.down("*[itemId='add-page-pagetype-template-view']");
		if (fullModel["page-type"] == "template" && Ext.isEmpty(fullModel["template"]))
		{
			templateView.addCls('invalid');
		}
		else
		{
			templateView.removeCls('invalid');
		}
		
		return (fullModel["page-type"] == "template" && !Ext.isEmpty(fullModel["template"]) && !Ext.isEmpty(fullModel["zone"]))
		|| (fullModel["page-type"] == "redirection-http" && this._cardPanel.down("*[itemId='add-page-pagetype-redirection-http-field']").isValid())
		|| (fullModel["page-type"] == "redirection-cms" && !Ext.isEmpty(fullModel["redirection-cms"]))
		|| fullModel["page-type"] == "blank";
	},
	
	updateModel: function()
	{
		if (this._cardPanel.getComponent("add-page-pagetype-template").getCollapsed() == false)
		{
			var templateView = this._cardPanel.down("*[itemId='add-page-pagetype-template-view']");
			
			this._model["page-type"] = "template";
			var selectedRecord = templateView.getSelectionModel().getSelection()[0];
			this._model["template"] = selectedRecord != null ? selectedRecord.getId() : null
			this._model["zone"] = selectedRecord != null ? selectedRecord.get('zone') : null;
		}
		else if (this._cardPanel.down("*[itemId='add-page-pagetype-redirection-http']").getCollapsed() == false)
		{
			this._model["page-type"] = "redirection-http";
			this._model["redirection-http"] = this._cardPanel.down("*[itemId='add-page-pagetype-redirection-http-field']").getValue();
		}
		else if (this._cardPanel.down("*[itemId='add-page-pagetype-redirection-cms']").getCollapsed() == false)
		{
			this._model["page-type"] = "redirection-cms";
			this._model["redirection-cms"] = this._cardPanel.down("*[itemId='add-page-pagetype-redirection-cms-field']").getValue();
		}
		else
		{
			this._model["page-type"] = "blank";
		}
	},
	
	onEnter: function()
	{
		var fullModel = Ametys.plugins.web.page.AddPageWizard.getModel();
		this._cardPanel.down("*[itemId='add-page-pagetype-template']").setDisabled(!fullModel["right-template"]);
        this._cardPanel.down("*[itemId='add-page-pagetype-template']").setVisible(this._isTrue(Ametys.plugins.web.page.AddPageWizard.getInitialConfig('pagetype-template')));

		this._cardPanel.down("*[itemId='add-page-pagetype-redirection-cms']").setDisabled(!fullModel["right-link"]);
		this._cardPanel.down("*[itemId='add-page-pagetype-redirection-cms']").setVisible(this._isTrue(Ametys.plugins.web.page.AddPageWizard.getInitialConfig('pagetype-redirection-cms')));
		this._cardPanel.down("*[itemId='add-page-pagetype-redirection-http']").setDisabled(!fullModel["right-link"]);
		this._cardPanel.down("*[itemId='add-page-pagetype-redirection-http']").setVisible(this._isTrue(Ametys.plugins.web.page.AddPageWizard.getInitialConfig('pagetype-redirection-http')));
		this._cardPanel.down("*[itemId='add-page-pagetype-blank']").setVisible(this._isTrue(Ametys.plugins.web.page.AddPageWizard.getInitialConfig('pagetype-blank')));
		
		if (this._model["page-type"] == "template" && !fullModel["right-template"])
		{
			this._model["page-type"] = "redirection-cms";
		}
		if (this._model["page-type"] == "redirection-cms" && !fullModel["right-link"])
		{
			this._model["page-type"] = "blank";
		}

		if (!this.shouldDisplayCard())
		{
			this._cardPanel.hide();
		}
	},
	
	
	// ------------------------------------------------------------------------------------------------
	/**
	 * @private
	 * Create panel for selecting template
	 */
	_createSelectTemplatePanel4SelectPageTypeCard: function ()
	{
		var store = Ext.create('Ext.data.Store', {
			model: 'Ametys.plugins.web.page.AddPageWizard.PageTypeCard.Template',
			
	        proxy: {
	        	type: 'ametys',
                role: 'org.ametys.web.repository.page.PageDAO',
                methodName: 'getAvailableTemplatesForCreation',
                methodArguments: ['pageId', 'parentId', 'title'],
                
	        	reader: {
	        		type: 'json'
	        	}
	        },
	        
	        sortInfo: {field: 'label', direction: 'ASC'}
		});
        if (Ametys.plugins.web.page.AddPageWizard.getInitialConfig('pagetype-card-template-filter') != null)
        {
            store.addFilter({
                property: 'id',
                value: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('pagetype-card-template-filter'),
                operator: 'in'
            });
        }
		
		return {
			itemId: 'add-page-pagetype-template',
			title: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['template-title'],
			header: {
				titlePosition: 1
			},
			
			items: [
			        {
			        	xtype: 'container',
			        	cls: 'a-text',
			        	html: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['template-title-help']
			        },
			        {
			        	xtype: 'dataview',
			        	ui: 'view',
			        	cls: 'data-view',
			        	
			        	itemId: 'add-page-pagetype-template-view',
			        
			        	border: true,
						scrollable: true,
						height: 105,
						
			            selModel: {
			                mode: 'SINGLE'
			            },
				        
						overItemCls:'x-view-over',
				        itemSelector:'div.dataview-item',
					    
					    tpl: new Ext.XTemplate(
								'<tpl for=".">',
							        '<div class="dataview-item" id="add-page-template-{id}">',
							        '<img src="' + Ametys.CONTEXT_PATH + '{iconMedium}"/>',
							        '<div class="text">',
							        '<span class="title">{label}</span>',
							        '<br/>{description}</span>',
							        '</div></div>',
							    '</tpl>'
					    ),
					        
						store: store,
						
						listeners: {
	                    	'selectionchange': Ext.bind(Ametys.plugins.web.page.AddPageWizard._onChange, Ametys.plugins.web.page.AddPageWizard)
	                    }
			        }
	        ]
	    };
	},

	// ------------------------------------------------------------------------------------------------
	/**
	 * @private
	 * Create panel for choosing a sitemap page of redirection 
	 */
	_createSitemapRedirection4SelectPageTypeCard: function ()
	{
        var selectPageConf = {
            itemId : "add-page-pagetype-redirection-cms-field",

            width: 420,
            hideLabel: true,
            sitemapContext: Ametys.web.form.widget.SelectPage.SITEMAP_CONTEXT_CURRENT,
            showSelectDecorators: true,
            
            listeners: {
                'change': Ext.bind(Ametys.plugins.web.page.AddPageWizard._onChange, Ametys.plugins.web.page.AddPageWizard)
            }
        };
        selectPageConf = Ext.apply(selectPageConf, this._selectPageConf);
		// Widget to select the redirection to a CMS page
		var sitemapWidgetCmsPage = Ext.create ('Ametys.web.form.widget.SelectPage', selectPageConf);
		
	   	// Container with the widget
		return {
			itemId: 'add-page-pagetype-redirection-cms',
			title: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['link-title'],
			header: {
				titlePosition: 1
			},
			items: [
			        {
			        	xtype: 'container',
			        	cls: 'a-text',
			        	html: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['link-help']
			        },
					sitemapWidgetCmsPage
	    	]
		};
	},

	// ------------------------------------------------------------------------------------------------
	/**
	 * @private
	 * Create panel for choosing a external page of redirection 
	 */
	_createExternalLinkRedirectionPanel4SelectPageTypeCard: function ()
	{
		// Container with the text which sets the address of the redirection to an external page
		return {	
			itemId: "add-page-pagetype-redirection-http",
			title: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['web-link-title'],
			header: {
				titlePosition: 1
			},
			
			items: [
					{
						xtype: 'container',
						cls: 'a-text',
						html: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['web-link-description']
					},
					{
						xtype: 'container',
						tag: 'label',
						cls: 'x-form-item-label',
						html: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['web-link-help']
					},
					{
						xtype: 'textfield',
						cls: 'ametys',
						itemId: "add-page-pagetype-redirection-http-field",
						allowBlank: false,
						regex: /^(https?:\/\/|\/).+$/, // Copy of the regexp in Ametys.plugins.web.page.PageActions#_doLinkWeb
						hideLabel: true,
						msgTarget: 'side',
						width: 420,
						
			            enableKeyEvents: true,
			            listeners: {
			            	 keyup: Ext.bind(Ametys.plugins.web.page.AddPageWizard._onChange, Ametys.plugins.web.page.AddPageWizard),
			            	 change: Ext.bind(Ametys.plugins.web.page.AddPageWizard._onChange, Ametys.plugins.web.page.AddPageWizard)
			            }
					},
					{
						xtype: 'container',
						cls: 'a-text',
						html: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['web-link-hint']
					}
			]
		};
	},

	// ------------------------------------------------------------------------------------------------
	/**
	 * @private
	 * Create panel for selecting blank page
	 */
	_createBlankPagePanel4SelectPageTypeCard: function ()
	{
		// Panel which represents an simple page
		return {
			itemId: "add-page-pagetype-blank",
			title: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['blank-title'],
			header: {
				titlePosition: 1
			},
			
	        items: [{
				xtype: 'container',
				cls: 'a-text',
				html: Ametys.plugins.web.page.AddPageWizard.getInitialConfig('i18n')['type']['blank-help']
			}]
		};
	},

	//------------------------------------------------------------------------------------------------
	/**
	 * @private
	 * Listener after expanding panel
	 * @param {Ext.Panel} panel the expanded panel
	 */
	_onAfterExpand: function (panel)
	{
		Ametys.plugins.web.page.AddPageWizard._onChange();
		this._scrollMultiselectToSelection(this._cardPanel.down("*[itemId='add-page-pagetype-template-view']"));
	},
	
	/**
	 * @private
	 * Scroll to current selection into multiselect field 
	 * @param {Ext.ux.form.MultiSelect} field the multiselect field 
	 */
	_scrollMultiselectToSelection: function(field)
	{
		/*if (field.rendered)
		{
			var eltScrolling = field.getEl().down(".x-boundlist");
			var eltSelected = eltScrolling.down('.x-boundlist-selected');
			if (eltSelected)
			{
				eltSelected.scrollIntoView(eltScrolling, false);
			}
		}*/
	}
});

Ext.define('Ametys.plugins.web.page.AddPageWizard.PageTypeCard.Template', { 
    extend: 'Ext.data.Model', 
    fields: [ 
        { name: 'id', type: 'string' }, 
        { name: 'label', type: 'string' }, 
        { name: 'description', type: 'string' }, 
        { name: 'iconSmall', type: 'string' },
        { name: 'iconMedium', type: 'string' },
        { name: 'iconLarge', type: 'string' },
        { name: 'zone', type: 'string' }
    ]
});