var video
var nome
var email
var cidade
var foto
var slugfoto
var participante
var dataCat
var respostas = []
var opcoes = []
var flagVideo = false
$(function() {
	/* Variaveis Ajax 1 */

	$('.fase-1').on('click', '.bt', function(e) {
		e.preventDefault()
		$('.fase-1').removeClass('selected')
		$('.fase-2').addClass('selected')
	})

	$('#formRoteiro .fase-2').on('click', '.bt-1', function(e) {
		e.preventDefault()
		nome = $('#inputNome').val()
		email = $('#inputEmail').val()
		cidade = $('#inputCidade').val()
		slugfoto = string_to_slug(nome)
		if (nome && cidade && validateEmail(email)) {
			$('.fase-2 .tela').removeClass('tela-1')
			$('.fase-2 .tela').addClass('tela-2')
			loadCamera()
		}
	})

	$('.fase-2').on('click', '.bt-photo', function(e) {
		e.preventDefault()
		$('.fase-2 .tela').removeClass('tela-2')
		$('.fase-2 .tela').addClass('tela-3')
		takeSnapShot()
		stopStreamedVideo(video)
	})

	$('.fase-2').on('click', '.bt-refresh', function(e) {
		e.preventDefault()
		$('.fase-2 .tela').removeClass('tela-3')
		$('.fase-2 .tela').addClass('tela-2')
		loadCamera()
	})

	$('.fase-2').on('click', '.bt-ok', function(e) {
		e.preventDefault()
		$.ajax({
			type: 'POST',
			url: ajaxRegistro,
			dataType: 'json', // add data type
			data: {
				action: 'info',
				nome: nome,
				email: email,
				cidade: cidade,
				foto: foto
			},
			success: function(response) {
				participante = response.participante
				$('.fase-2').removeClass('selected')
				$('.fase-3').addClass('selected')
			}
		})
	})

	var cat = ''
	var contCat = 0
	var tempCat = 1
	var tempClassCat = ''
	$('.fase-3 .opt').on('click', 'a', function(e) {
		e.preventDefault()
		cat = $(this).attr('href')
		dataCat = $(this).attr('data-cat') ? $(this).attr('data-cat') : cat
		contCat = $('.' + cat).length
		if (contCat > 0) {
			$('.fase-3').removeClass('selected')
			tempClassCat = '.' + cat + '-1'
			$(tempClassCat).addClass('selected')
		}
	})

	var contOpc = 0
	$('.fase-4 .quest').on('click', 'a', function(e) {
		e.preventDefault()
		var tipo = $(this).attr('href')
		var text = $(this).text()
		opcoes[contOpc] = [
			{
				tipo: tipo,
				texto: text
			}
		]
		if (tempCat < contCat) {
			tempCat++
			$(tempClassCat).removeClass('selected')
			tempClassCat = '.' + cat + '-' + tempCat
			$(tempClassCat).addClass('selected')
		} else {
			respostas = [
				{
					participante: participante,
					categoria: dataCat,
					respostas: opcoes
				}
			]

			$.ajax({
				type: 'POST',
				url: ajaxQrCode,
				dataType: 'json', // add data type
				data: {
					action: 'answer',
					respostas: respostas
				},
				success: function(response) {
					$('.fase-5 .code').attr('src', response.qrcode)
					$('.fase-4').removeClass('selected')
					$('.fase-5').addClass('selected')
				}
			})
		}

		contOpc++
	})

	$('body').on('click', '.btBack', function(e) {
		e.preventDefault()
		$('.fase.selected').removeClass('selected')
		$('.fase-1').addClass('selected')
		$('.fase-2 .tela').removeClass('tela-2')
		$('.fase-2 .tela').removeClass('tela-3')
		$('.fase-2 .tela').addClass('tela-1')
		$('#inputNome').val('')
		$('#inputEmail').val('')
		$('#inputCidade').val('')
		if (flagVideo) stopStreamedVideo(video)
		contCat = 0
		tempCat = 1
		contOpc = 0
		respostas = []
		opcoes = []
	})
})

function validateEmail(email) {
	var re = /\S+@\S+\.\S+/
	return re.test(email)
}

function loadCamera() {
	flagVideo = true
	//Captura elemento de vídeo
	video = document.querySelector('#webCamera')
	//As opções abaixo são necessárias para o funcionamento correto no iOS
	video.setAttribute('autoplay', '')
	video.setAttribute('muted', '')
	video.setAttribute('playsinline', '')
	video.setAttribute('width', '100%')
	video.setAttribute('height', '100%')
	//--

	//Verifica se o navegador pode capturar mídia
	if (navigator.mediaDevices.getUserMedia) {
		navigator.mediaDevices
			.getUserMedia({ audio: false, video: { facingMode: 'user' } })
			.then(function(stream) {
				//Definir o elemento vídeo a carregar o capturado pela webcam
				video.srcObject = stream
			})
			.catch(function(error) {
				alert("Oooopps... Falhou :'(")
			})
	}
}

function takeSnapShot() {
	//Captura elemento de vídeo
	var video = document.querySelector('#webCamera')

	//Criando um canvas que vai guardar a imagem temporariamente
	var canvas = document.createElement('canvas')
	canvas.width = video.videoWidth
	canvas.height = video.videoHeight
	var ctx = canvas.getContext('2d')

	//Desenhando e convertendo as dimensões
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

	//Criando o JPG
	var dataURI = canvas.toDataURL('image/jpeg') //O resultado é um BASE64 de uma imagem.
	document.querySelector('#base_img').value = dataURI

	document.querySelector('#imagemConvertida').setAttribute('src', dataURI)

	sendSnapShot(dataURI) //Gerar Imagem e Salvar Caminho no Banco
}

function sendSnapShot(base64) {
	var request = new XMLHttpRequest()
	request.open('POST', ajaxPhoto, true)
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
	request.onload = function() {
		//console.log(request)
		if (request.status >= 200 && request.status < 400) {
			//Colocar o caminho da imagem no SRC
			var data = JSON.parse(request.responseText)

			//verificar se houve erro
			if (data.error) {
				alert(data.error)
				return false
			}

			//Mostrar informações
			document.querySelector('#imagemConvertida').setAttribute('src', data.img)
			foto = data.img
			// document.querySelector('#caminhoImagem a').setAttribute('href', data.img)
			// document.querySelector('#caminhoImagem a').innerHTML = data.img.split('/')[1]
		} else {
			alert('Erro ao salvar. Tipo:' + request.status)
		}
	}

	request.onerror = function() {
		alert('Erro ao salvar. Back-End inacessível.')
	}

	request.send('base_img=' + base64 + '&base_slug=' + slugfoto) // Enviar dados
}

function stopStreamedVideo(videoElem) {
	const stream = videoElem.srcObject
	const tracks = stream.getTracks()
	flagVideo = false

	tracks.forEach(function(track) {
		track.stop()
	})

	videoElem.srcObject = null
}

function string_to_slug(str) {
	str = str.replace(/^\s+|\s+$/g, '') // trim
	str = str.toLowerCase()

	// remove accents, swap ñ for n, etc
	var from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;'
	var to = 'aaaaeeeeiiiioooouuuunc------'
	for (var i = 0, l = from.length; i < l; i++) {
		str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i))
	}

	str = str
		.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
		.replace(/\s+/g, '-') // collapse whitespace and replace by -
		.replace(/-+/g, '-') // collapse dashes

	return str
}
