/* globals define */
define(['knockout', 'jquery', 'css!./css/summary.css', 'text!./template.html'], function(ko, $, css, componentTemplate) {
	'use strict';

	// ----------------------------------------------
	// Define a Knockout ViewModel for your template
	// ----------------------------------------------
	var ComponentViewModel = function(args) {
		var self = this,
			SitesSDK = args.SitesSDK;
		
		// store the args
		self.mode = args.viewMode;
		self.id = args.id;

		// create the observables
		self.layout = ko.observable();
		self.color = ko.observable();
		self.buttons = ko.observable();
		self.columns = ko.observable();
		self.btn1Image = ko.observable();
		self.showHeader = ko.observable();
		self.deliocss = ko.observable('0');
		var delioID = '#'+args.id+' .drp-plh .scs-component-content';

		// handle initialization
		self.componentLayoutInitialized = ko.observable(false);
		self.customSettingsDataInitialized = ko.observable(false);
		self.initialized = ko.computed(function () {
			return self.componentLayoutInitialized() && self.customSettingsDataInitialized();
		}, self);

		//
		// Seed nested component data
		//
		self.imageData = {
		};
		self.titleData = {
		};
		
		self.headerData = {
		};
		
		self.paragraphData = {
		};
		
		self.paragraphData2 = {
		};
		
		self.buttonData = {	
		};
		self.buttonData2 = {	
		};
		self.imageBtn1Data = {
		};		

		// Custom methods		
		self.addDelioCSSLogic = ko.computed(function () {
			return self.deliocss()+"" === "1";
		}, self);
		
		self.showButtonOne = ko.computed(function () {
			var numButtons =  Number(self.buttons());
			numButtons = (isNaN(numButtons) || numButtons > 2 || numButtons <= 0) ? 0 : numButtons;
			return numButtons > 0 ;
		}, self);

		self.showButtonTwo = ko.computed(function () {
			var numButtons = Number(self.buttons());
			numButtons = (isNaN(numButtons) || numButtons > 2 || numButtons <= 0) ? 0 : numButtons;
			return numButtons == 2 ;
		}, self);
		
		self.hasOneColumn = ko.computed(function () {
			var numColumns = Number(self.columns());
			return (isNaN(numColumns) || numColumns === 1) ? true : false;
		}, self);		

		self.buttonClass = ko.computed(function () {
			var buttonClass = self.color();
			var btn1Icon = Number(self.btn1Image());
			var auxButtonIcon = (isNaN(btn1Icon) || btn1Icon === 0) ? "" : " button-icon button-icon--call-phone";

			if (typeof buttonClass !== 'undefined' && buttonClass.toLowerCase() === 'blue'){
				return 'button-blue'+auxButtonIcon;
			} else {
				return 'button'+auxButtonIcon;
			}
		}, self);

		self.showButtonOneIcon = ko.computed(function () {
			var btn1Icon =  Number(self.btn1Image());
			btn1Icon = (isNaN(btn1Icon) ) ? 0 : btn1Icon;		
			return btn1Icon === 1 ; // true
		}, self);
		
		self.showHeaderBool = ko.computed(function () {
			var showHdr =  Number(self.showHeader());
			showHdr = (isNaN(showHdr) ) ? 0 : showHdr;		
			return showHdr === 1 ; // true
		}, self);		
		
		//
		// Handle property changes
		//
		self.updateComponentLayout = $.proxy(function (componentLayout) {
			self.componentLayoutInitialized(true);
		}, self);		
		self.updateCustomSettingsData = $.proxy(function (customData) {
			if (customData) {
				self.color(customData.color);
				self.btn1Image(customData.btn1Image);
				self.buttons(customData.buttons);
				self.columns(customData.columns);
				self.showHeader(customData.showHeader);
				self.deliocss(customData.deliocss);
			}
			self.customSettingsDataInitialized(true);
		}, self);
		
		//
		//  Listen for changes to the settings data.
		//
		self.updateSettings = function (settings) {
			if (settings.property === 'componentLayout') {
				self.updateComponentLayout(settings.value);
			} else if (settings.property === 'customSettingsData') {
				self.updateCustomSettingsData(settings.value);
			}
		};
		// listen for the EXECUTE ACTION request to handle custom actions
		SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, $.proxy(self.executeActionsListener, self));
		// listen for settings update
		SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));

		
		// Handle Copy Style (save customSettingsData to the clipboard)
		self.copyComponentCustomData = function() {
			return {
				color: this.color(),
				buttons: this.buttons(),
				columns: this.columns(),
				btn1Image: this.btn1Image(),
				showHeader: this.showHeader(),
				deliocss: this.deliocss()
			};
		};
		
		// Handle Paste Style (apply customSettingsData from the clipboard)
		self.pasteComponentCustomData = function(data) {
			this.color(data.color);
			this.buttons(data.buttons);
			this.columns(data.columns);
			this.btn1Image(data.btn1Image);
			this.showHeader(data.showHeader);
			this.deliocss(data.deliocss);

			// save data in page
			SitesSDK.setProperty('customSettingsData', {
				color: this.color(),
				buttons: this.buttons(),
				columns: this.columns(),
				btn1Image: this.btn1Image(),
				showHeader: this.showHeader(),
				deliocss: this.deliocss()
			});
		};
		
		// listen for COPY_CUSTOM_DATA request
		SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.COPY_CUSTOM_DATA, $.proxy(self.copyComponentCustomData, self));

		// listen for PASTE_CUSTOM_DATA request
		SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.PASTE_CUSTOM_DATA, $.proxy(self.pasteComponentCustomData, self));

		//
		// Initialize the componentLayout & customSettingsData values
		//
		SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
		SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);		
		
		$( document ).ready(function() {
			if (self.addDelioCSSLogic()){
				$(delioID).find('a.scs-button-button').addClass('drp-href');
				$(delioID).find('a.scs-button-button > span.scs-button-text').addClass('drp-phone');
			}
		});		
	};
	
	// ----------------------------------------------
	// Create a knockout based component implemention
	// ----------------------------------------------
	var ComponentImpl = function(args) {
		// Initialze the custom component
		this.init(args);
	};
	// initialize all the values within the component from the given argument values
	ComponentImpl.prototype.init = function(args) {
		this.createViewModel(args);
		this.createTemplate(args);
		this.setupCallbacks();
	};
	// create the viewModel from the initial values
	ComponentImpl.prototype.createViewModel = function(args) {
		// create the viewModel
		this.viewModel = new ComponentViewModel(args);
	};
	// create the template based on the initial values
	ComponentImpl.prototype.createTemplate = function(args) {
		// create a unique ID for the div to add, this will be passed to the callback
		this.contentId = args.id + '_content_' + args.viewMode;
		// create a hidden custom component template that can be added to the DOM
		this.template = '<div id="' + this.contentId + '">' +
				componentTemplate +
				'</div>';
	};
	//
	// SDK Callbacks
	// setup the callbacks expected by the SDK API
	//
	ComponentImpl.prototype.setupCallbacks = function() {
		//
		// callback - render: add the component into the page
		//
		this.render = $.proxy(function(container) {
			var $container = $(container);
			// add the custom component template to the DOM
			$container.append(this.template);
			// apply the bindings
			ko.applyBindings(this.viewModel, $('#' + this.contentId)[0]);
		}, this);
		//
		// callback - update: handle property change event
		//
		this.update = $.proxy(function(args) {
			var self = this;
			// deal with each property changed
			$.each(args.properties, function(index, property) {
				if (property) {
					if (property.name === 'customSettingsData') {
						self.viewModel.updateComponentData(property.value);
					} else if (property.name === 'componentLayout') {
						self.viewModel.updateLayout(property.value);
					}
				}
			});
		}, this);
		//
		// callback - dispose: cleanup after component when it is removed from the page
		//
		this.dispose = $.proxy(function() {
			// nothing required for this component since knockout disposal will automatically clean up the node
		}, this);
	};
	
	// ----------------------------------------------
	// Create the factory object for your component
	// ----------------------------------------------
	var componentFactory = {
		createComponent: function(args, callback) {
			// return a new instance of the component
			return callback(new ComponentImpl(args));
		}
	};
	return componentFactory;
});