var SPMaskBehaviorFlyer = function (val) {
	return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
};
var spOptionsFlyer = {
	onKeyPress: function (val, e, field, options) {
		field.mask(SPMaskBehaviorFlyer.apply({}, arguments), options);
	}
};

var form = {
	id_produto: 0,
	id_produto_chave: 0,
	texts: [],
	images: [],
	inputs: [],
	models: [],
	key:0,
	project:0,
	id_model:0,
	tipo_editor: 0,
	appendForm: '#produto-form-personalizar .js-form-body',
	buttonHandler: '#produtos-detalhes #botPersonalizar',
	// campoModel: '<div class="dt-table-cell list js-model" id="#idmodel#"><div class="option-group-item"><input type="radio" name="txt_model" id="txt_model_#idmodel#" value="#idmodel#"><div class="option-group-radio"><i class="flaticon flaticon-circle33"></i><i class="flaticon flaticon-dot"></i></div><div class="option-group-label"><span class="price">#modelname#</span></div></div></div>',
	campoModel: '<label id="#idmodel#" class="btn btn-outline-secondary mr-2 mb-2 text-left js-model"><input type="radio" name="txt_model_#idmodel#" id="txt_model_#idmodel#" class="soUm obrigatorio" value="#idmodel#">#modelname#</label>',
	init: function () {
		self = this;

		this.id_produto = objProdutoDetalhes.idProduto;
		this.id_produto_chave = objProdutoDetalhes.idProdutoChave;

		$.ajax({
			url: "/central/jsons/produtosDetalhesPersonalizacao.js",
			type: "POST",
			dataType:'json',
			data : {
		          idP : this.id_produto,
		          salario : this.id_produto_chave
		    },
			beforeSend: function () {
				
			},
			success: function (objJSON) {
				if( typeof (objJSON.numTipoProduto) != "undefined") {
					self.tipo_editor = objJSON.numTipoProduto;
				}
				if( typeof (objJSON.objPersonalizacaoInfo.txtModelo) != "undefined") {
					self.id_model = objJSON.objPersonalizacaoInfo.txtModelo;
				}
				if( typeof (objJSON.objPersonalizacaoInfo.txtChave) != "undefined") {
					self.key = objJSON.objPersonalizacaoInfo.txtChave;					
				}
				self.initEditor();
			},
			error: function (objXHR, txtStatus, txtErro) {
				console.error('erro', objXHR);
			},
			complete: function (xhr) {
				
			}
		});
	},
	initEditor: function () {
		self = this;

		if (this.id_model == 0){
			console.error('Modelo não encontrado.');
			return;
		}

		if (this.key == 0){
			console.error('Chave do editor não informada.');
			return;
		}

		$.ajax({
			url: "https://editor.print-one.com.br/api/modelo/"+this.id_model+"/layers/?key="+this.key,
			type: "GET",
			dataType:'json',
			beforeSend: function () {
				
			},
			success: function (objJSON) {
				self.texts = objJSON.layers.texts
				self.images = objJSON.layers.images
				if (typeof self.texts != 'undefined') {
					self.configForm();
					self.createContainer();
					self.createForm();
				}else{
					console.error('Não existe layer de texto para este modelo.');
				}
			},
			error: function (objXHR, txtStatus, txtErro) {
				console.error('erro', objXHR);
			},
			complete: function (xhr) {
				
			}
		});
	},
	initModel: function(){
		self = this;
		$.ajax({
			url: "https://editor.print-one.com.br/api/modelo/"+this.id_model+"/?key="+this.key,
			type: "GET",
			dataType:'json',
			beforeSend: function () {
				
			},
			success: function (objJSON) {
				self.project = objJSON.model.project
				if (typeof self.project != 0) {
					self.getModelByProject();
				}else{
					console.error('Não existe este modelo.');
				}
			},
			error: function (objXHR, txtStatus, txtErro) {
				console.error('erro', objXHR);
			},
			complete: function (xhr) {
				
			}
		});
	},
	getModelByProject: function(){
		self = this;
		$.ajax({
			url: "https://editor.print-one.com.br/api/projetos/"+this.project+"/?key="+this.key,
			type: "GET",
			dataType:'json',
			beforeSend: function () {
				
			},
			success: function (objJSON) {
				self.models = objJSON.modelos
				console.log('objJSON', objJSON);
				if (typeof self.models != 'undefined') {
					self.createContainerModel();
					self.createFormModel();
				}else{
					console.error('Não existe modelo para este projeto.');
					self.initEditor();
				}
			},
			error: function (objXHR, txtStatus, txtErro) {
				console.error('erro', objXHR);
			},
			complete: function (xhr) {
				
			}
		});
	},
	createContainer: function () {
		$container = $(`<div id="produto-form-personalizar" class="col-12 mb-4" >
							<div class="card">
								<div class="card-header">
                                    <h3 class="s-produtos-detalhes-subtitulo">
                                        Preencha os dados corretamente
                                    </h3>
                                </div>
									
								<div class="card-body">
                                    <div class="row">
                                    	<div class="col-12">
                                    		<div class="row js-form-body">
                                    		</div>
                                    	</div>
                                    </div>
                                </div>
							</div>
						</div>`);

		if ($('#produto-form-personalizar-model').length > 0){
			$container.insertAfter('#produto-form-personalizar-model');
		}else{
			$container.insertAfter('#innerProdutoInfo');
		}
	},
	createContainerModel: function () {
		$container = $(`<div id="produto-form-personalizar-model" class="col-12 mb-4" >
							<div class="card">
								<div class="card-header">
                                    <h3 class="s-produtos-detalhes-subtitulo">
                                        Selecione o Modelo
                                    </h3>
                                </div>
									
								<div class="card-body">
                                    <div class="row">
                                    	<div class="col-12">
                                			<div class="js-form-body-model btn-group btn-group-toggle w-100" data-toggle="buttons">

                                			</div>
                                    	</div>
                                    </div>
                                </div>
							</div>
						</div>`);

		$container.insertAfter('#innerProdutoInfo');
	},
	configForm: function () {
		for (let key = 0; key < this.texts.length; key++) {
            let element = this.texts[key].name;
            let elementID = this.texts[key].name.replace(' ', '').toLowerCase();
            elementID = elementID.replace('ç', 'c');
            let mask = element.toLowerCase().indexOf('telefone') != -1 || element.toLowerCase().indexOf('celular') != -1 ? true : false;
            let maxlength = element.toLowerCase().indexOf('nome') != -1 ? 20 : false;
            let type = 'text';
            let label = this.capitalize(element.replace(/\#/g,''));
            let value = '';

        	if (this.findArray(elementID)){
            	this.inputs.push({
	                name:elementID,
	                label: label,
	                match:"#"+elementID+"#",
	                value:value,
	                required: true,
	                id: elementID,
	                type: type,
	                mask: mask,
	                maxlength, maxlength
	            });
            }	
            
        }
    },
	createForm: function () {
		
		if (!this.inputs.length) {
			console.error('Nenhum input definido');
		} else {
			for (var i in this.inputs) {
				$(this.appendForm).append(this.getInput(this.inputs[i]));
			}
			$button = $('<div></div>');
			$button.css({
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'right': 0,
				'bottom': 0,
				'z-index': 1,
				'cursor': 'pointer'
			}).click(function (event) {
				event.preventDefault();
				form.save();
			});
			$(self.buttonHandler).css({
				'position': 'relative'
			}).parent().css({
				'position': 'relative'
			}).append($button)
		}
	},
	createFormModel:function(){
		self = this;

		if(!self.models.length){
			console.error('Nenhum input definido');
		}else{
			for (var i in self.models){

				$resultado = self.campoModel.replace('#idmodel#', self.models[i].id);
				$resultado = $resultado.replace('#idmodel#', self.models[i].id);
				$resultado = $resultado.replace('#idmodel#', self.models[i].id);
				$resultado = $resultado.replace('#idmodel#', self.models[i].id);
				$resultado = $resultado.replace('#modelname#', self.models[i].name);

				$(".js-form-body-model").append($resultado);	
			}

			$('.js-model').click(function(event) {
				$('#produto-form-personalizar').remove();
				form.model_selecionado = true;
				form.id_model = $(this).attr('id');
				console.log('form.id_model', form.id_model)
				form.initEditor();
			});

			$button = $('<div></div>');
			$button.css({
				'position':'absolute',
				'top':0,
				'left':0,
				'right':0,
				'bottom':0,
				'z-index':1,
				'cursor':'pointer'
			}).click(function(event) {
				event.preventDefault();
				form.save();
			});
			$(self.buttonHandler).css({
				'position':'relative'
			}).parent().css({
				'position':'relative'
			}).append($button)

		}
	},
	capitalize: function (string) {
        string = string[0].toUpperCase() + string.slice(1);
        //tem número na string? Ex: Telefone1, Telefone2...
        hasNumber = string.match(/[0-9]/);
        if(hasNumber){
            //Separa para ficar Telefone 1, Telefone 2, Telefone 3
            string = string.replace(hasNumber[0], ' ' + hasNumber[0]);
        }
        return string;
    },
    findArray: function (string) {
    	//Verifica se já existe um campo com o nome igual, se tiver não deixa criar o input
    	if (this.inputs.filter(p => p.name == string).length > 0){
    		return false;
    	}else{
    		return true;
    	}
    },
	getInput: function (input) {
		$field = $('<div class="col-12 mb-3"></div>');

		var $input;
		if (input.type == 'select') {
			$input = $('<select></select>');

			for (var i in input.value) {
				$input.append('<option value="' + input.value[i] + '">' + input.value[i] + '</option>');
			}

		} else {
			$input = $('<input class="form-control" type="' + input.type + '" />');
		}

		$input.attr({
			'name': input.name,
			'id': input.id
		}).data({
			'match': input.match,
			'required': input.required,
		})

		if (!!localStorage.getItem(input.match)) {
			$input.val(localStorage.getItem(input.match));
		}

		if (input.maxlength) {
			$input.attr({
				'maxlength': input.maxlength,
			}).data({
				'maxlength': input.maxlength
			})
		}

		var $label = $('<label class="form-label"></label>');
		$label.attr({
			'for': input.id
		}).text(input.label);

		var $span;
		if (input.maxlength) {

			$span = $('<span>' + ($input.val().length) + '/' + input.maxlength + '</span>');
			$input.on('input', function () {
				max = $(this).data('maxlength');
				current = $(this).val().length;
				$(this).next('span').text(current + '/' + max);
			})
		}

		if(input.mask !== false){
			$input.mask(SPMaskBehaviorFlyer, spOptionsFlyer);
		}

		$field.append($label);
		$field.append($input);
		$field.append($span);
		return $field;
	},
	save:function(){
		self = this;
		var validate = true;
		if ($('#produto-form-personalizar-model').length > 0){

			if (self.model_selecionado == false) {
				alert('Informe o tipo de modelo antes de continuar.');
				validate = false;
			}else{
				localStorage.setItem('#idmodelo#', self.id_model);
			}

			localStorage.setItem('#preview#', 1);
			for (var i in self.images){
				if (self.images[i].bit_block_upload == 0){
					localStorage.setItem('#preview#', 0);
					break;
				}
			}
		}
		for (var i in self.inputs){
			if(self.inputs[i].required && $('#'+self.inputs[i].id).val() == ''){
				alert('Campo '+self.inputs[i].label+' é obrigatório');
				$('#'+self.inputs[i].id).focus();
				validate = false;
				break;
			}else{
				localStorage.setItem($('#'+self.inputs[i].id).data('match'), $('#'+self.inputs[i].id).val());
			}
		}
		if(validate){
			$(self.buttonHandler).click();
		}
	},
};

const FooteLogin = `
					<div class="login-footer">
						<ul>
							<li class="login-phone">
								<i class="fa fa-phone" aria-hidden="true"></i><span>(11) 98611-0463</span>
							</li>
							<li class="login-email">
								<a href="mailto:atendimento@w2pcorporativo.com.br" target="_blank">
								<i class="fa fa-envelope-o" aria-hidden="true"></i><span>atendimento@w2pcorporativo.com.br</span></a>
							</li>
							<li class="login-site">
								<a href="https://w2pcorporativo.com.br" target="_blank">
								<i class="fa fa-link" aria-hidden="true"></i><span>w2pcorporativo.com.br</span></a>
							</li>
							<li class="login-whatsapp">
								<a href="https://api.whatsapp.com/send/?phone=5511986110463&amp;text=Em+que+posso+ajudar%3F&amp;type=phone_number&amp;app_absent=0" target="_blank">
								<i class="fa fa-whatsapp" aria-hidden="true"></i></a>
							</li>
							<li class="login-insta">
								<a href="https://instagram.com/w2pcorporativo?igshid=ZDdkNTZiNTM=" target="_blank" aria-label="Instagram">
								<i aria-hidden="true" class="fab fa-instagram"></i></a>
							</li>
							<li class="login-linkedin">
								<a href="https://www.linkedin.com/company/w2p-corporativo/" target="_blank" aria-label="LinkedIn">
								<i aria-hidden="true" class="fab fa-linkedin-in"></i></a>
							</li>
						</ul>
					</div>
					`

$(document).ready(function(){

setTimeout(function(){ 
		$('#s-login-b2b').after(FooteLogin);
	}, 1000);

	if (document.URL.indexOf('/produtos-detalhes/') > 0) {
	
		setTimeout(function(){ 
			form.init();
		}, 3000);
	}
	
});