console.log('Theme JS');

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 formOmie = {
	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',
	init: function () {
		self = this;

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

		$.ajax({
			url: "/loja/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) {
				
			}
		});
	},
	createContainer: function () {

		if ($('#produto-form-personalizar').length > 0) {
			return
		}

		$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>`);

		$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,''));
            console.log('label', label)
            console.log('label.toLowerCase().indexOf', label.toLowerCase().indexOf('end'))
            label = label.toLowerCase().indexOf('end') != -1 ? 'Endereço' : label;
            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',
				'width': $(this.buttonHandler).width() + 34
			}).click(function (event) {
				event.preventDefault();
				formOmie.save();
			});

			console.log('$(this.buttonHandler).', $(this.buttonHandler).width())

			$(this.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){
			if ($('#url_qrcode').length > 0) {
				formUrlQrcode.save();
			}else{
				$(self.buttonHandler).click();	
			}
		}
	},
};
var maskTel = function (val) {
	return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
};

var optionTel = {
	onKeyPress: function (val, e, field, options) {
		field.mask(maskTel.apply({}, arguments), options);
	}
};

var formUrlQrcode = {
	inputs: [
		{
			label: 'Site',
			name:'url_qrcode',
			type:'text',
			maxlength:"",
			required:true,
			id:'url_qrcode',
			value:'',
			mask:false
		}
	],
	appendForm: '#produto-form-personalizar .js-form-body',
	buttonHandler: '#produtos-detalhes #botPersonalizar',
	init: function () {
		this.createContainer();
		this.createForm();
		this.getDadosCLiente();
	},
	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>`);
		
		$container.insertAfter('#innerProdutoInfo');
	},
	getDadosCLiente: function(){
		self = this;
		$.ajax({
			url: "/loja/jsons/meusDados.js",
			type: "GET",
			dataType:'json',
			beforeSend: function () {
				
			},
			success: function (objJSON) {
				self.models = objJSON.txtSite
				
				if (typeof objJSON.txtSite != 'undefined') {
					$(`#url_qrcode`).val(objJSON.txtSite)
				}
			},
			error: function (objXHR, txtStatus, txtErro) {
				console.error('erro', objXHR);
			},
			complete: function (xhr) {
				
			}
		});
	},
	createForm: function () {
		self = this;

		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();
				self.save();
			});
			$(this.buttonHandler).css({
				'position': 'relative'
			}).parent().css({
				'position': 'relative'
			}).append($button)
		}
	},
	getInput: function (input) {
		self = this;

		$field = $('<div class="col-12 mb-3"></div>');

		var $input;
		if (input.type == 'select') {
			$input = $('<select class="form-control"></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({
			'required': input.required,
		})

		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 () {
				self.maxlength($(this))
			})

			$input.change(function() {
				self.maxlength($(this))
			})
		}

		if(input.mask !== false && input.name == 'telefone'){
			$input.mask(maskTel, optionTel);
		}

		if(input.mask !== false && input.name == 'cep'){
			$input.mask('00000-000');

			$input.change(function() {
			  	self.buscaCep();
			});
		}

		$field.append($label);
		$field.append($input);
		$field.append($span);
		return $field;
	},
	maxlength:function(elemento) {
		max = elemento.data('maxlength');
		current = elemento.val().length;
		elemento.next('span').text(current + '/' + max);
	},
	save:function() {
		self = this;
		var validate = true;
		
		if(self.inputs[0].required && $(`#url_qrcode`).val() == ''){
			alert('Campo '+self.inputs[0].label+' é obrigatório');
			$('#url_qrcode').focus();
			validate = false;

			return
		}else{
			localStorage.setItem( "#url_qrcode#" , $('#url_qrcode').val() );
		}

		if(validate){

			post = {};
			post['width'] = 3000;
			post['key'] = 'B28752184046517F27738FA6CC739F84E84670EC5EF0A4F71B2E9D942EFE2458';
			post['url'] = $(`#url_qrcode`).val();

			$.ajax({
				url: "https://qrcode.print-one.com.br/api/link/",
				type: "POST",
				data : post,
				dataType:'json',
				beforeSend: function () {
					
				},
				success: function (objJSON) {
					if (objJSON.status == 1) {
						localStorage.setItem('#qrcode#', objJSON.url);
						$(self.buttonHandler).click();
					}else{
						fncToast('Aviso!', `Não foi possivel salvar, motivo: ${objJSON.descricao}`, 'erro');
					}
				},
				error: function (objXHR, txtStatus, txtErro) {
					console.error('erro', objXHR);
				},
				complete: function (xhr) {
					
				}
			});
		}
	}
};

const contatoFranqueado = `
						<li class="s-footer-contato-item"><a href="https://app.yungas.com.br/auth/login/?url=http://app.yungas.com.br/" target="_blank" class="s-footer-contato-item-link"><i class="fa fa-users" aria-hidden="true"></i>Contato Franqueado</a></li>
                        `

$(document).ready(function(){

	setTimeout(function(){ 
		$('#footer .s-footer-contato').prepend(contatoFranqueado);
	}, 1000);

    if (document.URL.indexOf('/produtos-detalhes/') > 0) {

		//Camisetas
		if (document.URL.indexOf('/0HNIQCOJ/') > 0 || document.URL.indexOf('/8ERLQCOJ/') > 0 || document.URL.indexOf('/8RRLQLNJ/') > 0 || document.URL.indexOf('/8EMMRLNJ/') > 0 || document.URL.indexOf('/8KNPRLNJ/') > 0 || document.URL.indexOf('/8GNJMNNJ/') > 0 || document.URL.indexOf('/0EPMMNNJ/') > 0 || document.URL.indexOf('/4RQPMNNJ/') > 0 || document.URL.indexOf('/0LMDNNNJ/') > 0 || document.URL.indexOf('/8GQJNNNJ/') > 0 || document.URL.indexOf('/0FSMNNNJ/') > 0 || document.URL.indexOf('/4PNQNNNJ/') > 0 || document.URL.indexOf('/0OPDONNJ/') > 0 || document.URL.indexOf('/8MRGONNJ/') > 0 || document.URL.indexOf('/8ROMOPNJ/') > 0 || document.URL.indexOf('/4IPQNCOJ/') > 0 || document.URL.indexOf('/0QMEOCOJ/') > 0 || document.URL.indexOf('/8KRJNEOJ/') > 0 || document.URL.indexOf('/0NPNNEOJ/') > 0 || document.URL.indexOf('/8QNESEOJ/') > 0 || document.URL.indexOf('/0HMEMFOJ/') > 0 || document.URL.indexOf('/4RQHMFOJ/') > 0 || document.URL.indexOf('/0IPLMFOJ/') > 0 || document.URL.indexOf('/8ONPMFOJ/') > 0 || document.URL.indexOf('/8FMDNFOJ/') > 0 || document.URL.indexOf('/8JREPFOJ/') > 0 || document.URL.indexOf('/0HOHPGOJ/') > 0 || document.URL.indexOf('/4FNLPGOJ/') > 0 || document.URL.indexOf('/0EMPPGOJ/') > 0 || document.URL.indexOf('/8GRCQGOJ/') > 0 || document.URL.indexOf('/8FQGQGOJ/') > 0 || document.URL.indexOf('/0FPKQGOJ/') > 0 || document.URL.indexOf('/0DQENHOJ/') > 0 || document.URL.indexOf('/8EPINHOJ/') > 0
) {
			setTimeout(function(){
				$('#innerObservacoes').insertAfter('#innerQuantidade');
				document.querySelector("#innerObservacoes .card .card-header").innerHTML = "<h3 class='s-produtos-detalhes-subtitulo'>Informe aqui a quantidade para cada tamanho.<br/>Nossas numera&ccedil;&otilde;es: PP, P, M, G, GG, XG, XXGG</h3>";
			}, 3000);
		}

		//Moletons
		if (document.URL.indexOf('/0IMQRMNJ/') > 0 || document.URL.indexOf('/4EODSMNJ/') > 0 || document.URL.indexOf('/0RPCMNNJ/') > 0 || document.URL.indexOf('/8NRFMNNJ/') > 0 || document.URL.indexOf('/8KPQREOJ/') > 0 || document.URL.indexOf('/8ESFMIOJ/') > 0 || document.URL.indexOf('/0LRJMIOJ/') > 0 || document.URL.indexOf('/4RQNMIOJ/') > 0
		) {
			setTimeout(function(){
				$('#innerObservacoes').insertAfter('#innerQuantidade');
				document.querySelector("#innerObservacoes .card .card-header").innerHTML = "<h3 class='s-produtos-detalhes-subtitulo'>Informe aqui a quantidade para cada tamanho.<br/>Nossas numera&ccedil;&otilde;es: P, M, G, GG, XG</h3>";
			}, 3000);
		}

		if (document.URL.indexOf('/8HPIOMNJ/') > 0 || document.URL.indexOf('/8FOQRKNJ/') > 0 || document.URL.indexOf('/8FPDSKNJ/') > 0 || document.URL.indexOf('/0GPCNLNJ/') > 0 || document.URL.indexOf('/4HQFNLNJ/') > 0 || document.URL.indexOf('/4GMCOMNJ/') > 0 || document.URL.indexOf('/0PNFOMNJ/') > 0 || document.URL.indexOf('/4NPFOLNJ/') > 0 || document.URL.indexOf('/8CSLOLNJ/') > 0 || document.URL.indexOf('/0DOPPMNJ/') > 0 || document.URL.indexOf('/4NPCQMNJ/') > 0 || document.URL.indexOf('/0IRFQMNJ/') > 0 || document.URL.indexOf('/0INGRMNJ/') > 0 || document.URL.indexOf('/0ROCSLNJ/') > 0 || document.URL.indexOf('/0JPFPMNJ/') > 0 || document.URL.indexOf('/8CRIPMNJ/') > 0 || document.URL.indexOf('/8IMMPMNJ/') > 0 || document.URL.indexOf('/8QQLOMNJ/') > 0 || document.URL.indexOf('/0GMPOMNJ/') > 0 || document.URL.indexOf('/4PNCPMNJ/') > 0 || document.URL.indexOf('/8GMMNLNJ/') > 0 || document.URL.indexOf('/0CQQRONJ/') > 0 || document.URL.indexOf('/0PODMPNJ/') > 0 || document.URL.indexOf('/4GMESONJ/') > 0 || document.URL.indexOf('/8HRGMPNJ/') > 0 || document.URL.indexOf('/0RMGPCOJ/') > 0 || document.URL.indexOf('/8NQJPCOJ/') > 0 || document.URL.indexOf('/8GONPCOJ/') > 0 || document.URL.indexOf('/0ESQPCOJ/') > 0 || document.URL.indexOf('/4NPEQCOJ/') > 0 || document.URL.indexOf('/0JMDRCOJ/') > 0 || document.URL.indexOf('/8OOPQCOJ/') > 0 || document.URL.indexOf('/8INPNLNJ/') > 0 || document.URL.indexOf('/4RQQMHOJ/') > 0 || document.URL.indexOf('/0IQNRGOJ/') > 0 || document.URL.indexOf('/8NONMGOJ/') > 0 || document.URL.indexOf('/8DQMNGOJ/') > 0 || document.URL.indexOf('/0KNRMGOJ/') > 0 || document.URL.indexOf('/8QOQNGOJ/') > 0 || document.URL.indexOf('/0ONEOGOJ/') > 0 || document.URL.indexOf('/4OOGQEOJ/') > 0 || document.URL.indexOf('/0KQCQEOJ/') > 0 || document.URL.indexOf('/8FSOPEOJ/') > 0 || document.URL.indexOf('/8ENGNEOJ/') > 0 || document.URL.indexOf('/4EONOFOJ/') > 0 || document.URL.indexOf('/4NPLPDOJ/') > 0 || document.URL.indexOf('/4EOQRDOJ/') > 0 || document.URL.indexOf('/0FMESDOJ/') > 0 || document.URL.indexOf('/8JQDMEOJ/') > 0 || document.URL.indexOf('/8KOHMEOJ/') > 0 || document.URL.indexOf('/0DPCNEOJ/') > 0 || document.URL.indexOf('/0DNKQEOJ/') > 0 || document.URL.indexOf('/8LRNQEOJ/') > 0 || document.URL.indexOf('/8QPRQEOJ/') > 0 || document.URL.indexOf('/0GOFREOJ/') > 0 || document.URL.indexOf('/4LMJREOJ/') > 0 || document.URL.indexOf('/0FRMREOJ/') > 0 || document.URL.indexOf('/0RNPQFOJ/') > 0 || document.URL.indexOf('/4LMDRFOJ/') > 0 || document.URL.indexOf('/0KRGRFOJ/') > 0 || document.URL.indexOf('/0HRINGOJ/') > 0 || document.URL.indexOf('/0NMROFOJ/') > 0 || document.URL.indexOf('/8RPJMGOJ/') > 0 || document.URL.indexOf('/0LOCOLNJ/') > 0
){
			setTimeout(function(){ 

				formUrlQrcode.init();

				if (document.URL.indexOf('/8FOQRKNJ/') > 0 || document.URL.indexOf('/8FPDSKNJ/') > 0 || document.URL.indexOf('/8DOLOCOJ/') > 0  || document.URL.indexOf('/4IPCPCOJ/') > 0 || document.URL.indexOf('/0CQQRONJ/') > 0 || document.URL.indexOf('/0PODMPNJ/') > 0 || document.URL.indexOf('/0RMGPCOJ/') > 0 || document.URL.indexOf('/8NQJPCOJ/') > 0 || document.URL.indexOf('/0JMDRCOJ/') > 0 || document.URL.indexOf('/8OOPQCOJ/') > 0 || document.URL.indexOf('/0ENCRGOJ/') > 0 || document.URL.indexOf('/4EOOQGOJ/') > 0 || document.URL.indexOf('/0MMLMEOJ/') > 0 || document.URL.indexOf('/4RQOMEOJ/') > 0 || document.URL.indexOf('/4EONOFOJ/') > 0 || document.URL.indexOf('/0GRFMGOJ/') > 0
 ){
					console.log('entrou??')
					formOmie.init();	
				}

			}, 3000);
		}else{
			setTimeout(function(){ 
				formOmie.init();
			}, 3000);
		}
		
	}

});