/* globals define, SCSRenderAPI */

define([
	'jquery',
	'css!./layout.css'
], function( $ ) {
	'use strict';

	function SectionLayout( params ) {
		this.sectionLayoutData = params.sectionLayoutData || {};
		this.renderMode = params.renderMode || SCSRenderAPI.getRenderMode();
	}

	SectionLayout.prototype = {		

		createComponentDiv: function( componentId,index ) {
			var self=this;
			var porcentaje = parseInt(self.sectionLayoutData.customSettingsData.porcentaje) || 0;
			var padding = parseInt(self.sectionLayoutData.customSettingsData.padding) || 0;
			var fluid = parseInt(self.sectionLayoutData.customSettingsData.fluid) || 0;
			var componenttype = parseInt(self.sectionLayoutData.customSettingsData.componenttype) || 0;
			var clase1;
			var clase2;
			
			// default
			clase1='<div class="col-sm-12 col-md-12 col-lg-4"  id="' + componentId + '"></div>';
			clase2='<div class="col-sm-12 col-md-12 col-lg-6"  id="' + componentId + '"></div>';
			
			if (porcentaje ==0)
			{
				clase1 = buildClass("col-sm-12 col-md-12 col-lg-4", componentId );
				clase2 ='<div class="col-sm-12 col-md-12 col-lg-2"> </div> <div class="col-sm-12 col-md-12 col-lg-6"  id="' + componentId + '"></div>';
			}
			
			// 40 - 60 %
			if (porcentaje ==1 || (porcentaje == 2 && componenttype == 1))  // 60-40% managed with class "flex-row-reverse"
			{
				clase1 = buildClass("col-sm-12 col-md-12 col-lg-4", componentId, (porcentaje == 2 && componenttype == 1) );
				clase2 = buildClass("col-sm-12 col-md-12 col-lg-6", componentId );
			} else if (porcentaje ==2)
			{
				clase1 = buildClass("col-sm-12 col-md-12 col-lg-6", componentId );
				clase2 = buildClass("col-sm-12 col-md-12 col-lg-4", componentId, (componenttype ===1));
			}		

			// 50 - 70 %			
			if (porcentaje ==3 || (porcentaje == 4 && componenttype == 1)) // 70-50% managed with class "flex-row-reverse"
			{
				clase1 = buildClass("col-sm-12 col-md-12 col-lg-5", componentId, (porcentaje == 4 && componenttype == 1) );
				clase2 = buildClass("col-sm-12 col-md-12 col-lg-7", componentId );
			} else 	if (porcentaje ==4)
			{
				clase1 = buildClass("col-sm-12 col-md-12 col-lg-7", componentId );
				clase2 = buildClass("col-sm-12 col-md-12 col-lg-5", componentId, (componenttype ===1) );
			}						
			
			if (porcentaje == 5)  // 50-50% 
			{
				clase1 = buildClass("col-sm-12 col-md-12 col-lg-6", componentId );
				clase2 = buildClass("col-sm-12 col-md-12 col-lg-6", componentId );
			}
			if (porcentaje == 6)  // 8 cols - 4 cols (formulario contacto) 
			{
				clase1 = buildClass("col-sm-12 col-md-12 col-lg-8", componentId );
				clase2 = buildClass("col-sm-12 col-md-12 col-lg-4", componentId );
			}			
				
			if (index==0) {
				return clase1;
				//return '  <div class="col-sm-12 col-md-12 col-lg-2> </div> <div class="col-sm-12 col-md-12 col-lg-6"  id="' + componentId + '"></div>';
			}
			else {
				return clase2;
				//return ' <div class="col-sm-12 col-md-12 col-lg-4"  id="' + componentId + '"></div>';
			}
		},

		render: function( parentObj ) {
			var self = this;
			var html = '<div class="container-fluid" ><div class="content-with-padding"><div class="row">';
			var maxItems = 2;
			var porcentaje=0; //50% por defecto.
			var padding=0; // false por defecto.
			var fluid=0; // false por defecto.
			var emptyClass;
			var components = self.sectionLayoutData.components || [];		
			var componenttype = parseInt(self.sectionLayoutData.customSettingsData.componenttype) || 0;

			if( self.sectionLayoutData.customSettingsData &&
				( typeof self.sectionLayoutData.customSettingsData.maxItems === 'number' ) &&
				( self.sectionLayoutData.customSettingsData.maxItems > 0 ) ) {
				maxItems = self.sectionLayoutData.customSettingsData.maxItems;

			}
			porcentaje = parseInt(self.sectionLayoutData.customSettingsData.porcentaje) || 0;
			padding = parseInt(self.sectionLayoutData.customSettingsData.padding) || 0;
			fluid = parseInt(self.sectionLayoutData.customSettingsData.fluid) || 0;
			
			
			if (fluid === 0){
				// Update class
				html = '<div class="container" >';
			} else {
				html = '<div class="container-fluid" >';
			}
			
			var rowClass = "row";
	
			if (componenttype === 1 ) {
				rowClass = "row align-items-center ";
				if (porcentaje === 2 || porcentaje === 4){
					rowClass += " flex-row-reverse ";
				}
			} else if (componenttype === 0 ) {
				rowClass = "row align-items-center ";
			} else if (componenttype === 2) {
				rowClass = "row ";
			} else if (componenttype === 3) {
				rowClass = "row contactanos";
			}
			
			if (padding === 0){
				// Remove DIV from HTML
				html += '<div class="'+rowClass+'">';
			} else {
				html += '<div class="content-with-padding"><div class="'+rowClass+'">';
			}
			
			try {
				// Add the child components to the section layout.  For each of the child 
				// components, add a <div> to the page.  The child components will be 
				// rendered into these <div>s.
				$.each( components, function( index, value ) {
					if( !maxItems || ( index < maxItems ) ) {
						html += self.createComponentDiv(value,index);
					}
				});

				// Add a drop zone to the section layout in edit mode, if applicable
				if( ( self.renderMode === SCSRenderAPI.RENDER_MODE_EDIT )  &&
					( ( maxItems === 0 ) || ( components.length < maxItems ) ) ) {
					emptyClass = ( components.length > 0 ) ? '' : 'sl-empty';
					$(parentObj).append( '<div class="' + emptyClass + '">Añade dos elementos</div>' );
				}

				if( html ) {
					$(parentObj).append( html );
				} 
			} catch( e ) {
				console.error(  "Error 1909021314" );
			}
		},
		// dynamic API for adding additional components through "load more" when used in a Content List
		addComponent: function (parentObj, component) {
			// create the component div and add it to the parent object
			$(parentObj).append(this.createComponentDiv(component));
		}
	};
	
	// Auxiliar
	function buildClass(clase, componentId, responsive = false ){
		if (responsive){
			return '<div class="'+clase+'" ><div class="responsive-image responsive-image-square" id="' + componentId + '"></div></div>';
		} else {
			return '<div class="'+clase+'"  id="' + componentId + '"></div>';
		}
	};

	return SectionLayout;
});