let FONT_COLOR = $('.font_color').val();
let CASE_TYPE = 'transparent';
var textObj = null;
var mockup = null;
var fontsize = null;
var offsettop = null;
var strokeToggle = 1;
var font = $('.btn-cart').attr('font');

window.devicePixelRatio = 1;

const canvas = new fabric.Canvas('canvas', {
	width: $('.slider-right').width(),
	height: $('.slider-right').width(),
	hoverCursor: "default",
	selection : false,
  allowTouchScrolling: true
});

var img = $('.editable-thumb').val();

fabric.Image.fromURL(img, function(mckp)
{
 	mockup = mckp.set({
 		left: 0,
 		top: 0 ,
		selectable: false,
		hoverCursor: "default"
 	});

 	mockup.scaleToHeight(canvas.height);
 	canvas.add(mockup);
});

$('.nametext').on('keyup', function()
{
	var text = $(this).val();
	txtChanged(text);
});

function txtChanged(text)
{
	text = text.replace( /[^a-zA-ZÀ-ÖØ-öø-ÿ . & ]/gm, '');
	text = text.replace('.', '');

	$('.nametext').val(text);

	if(text.length > 20)
	{
		text = text.substr(0, 20);
		$('.nametext').val(text);
	}

	if(isSpecialFont(font))
	{
		var nametext = getText(font, text);
	}
	else
	{
		var nametext = text;
	}

	$('.btn-cart').attr('nametext', text);

	FONT_COLOR = FONT_COLOR.replace('#', '');

	if(strokeToggle == 1)
	{
		console.log('stroke');
		textObj = new fabric.Text(nametext, {
			id: 'textobject',
	      	fontFamily: font,
	      	top: (canvas.height / 2),
	      	fill: '#' + FONT_COLOR,
	      	width: canvas.width,
	      	stroke: getStrokeColor(),
	      	strokeWidth: 2,
	      	paintFirst: "stroke",
	      	hoverCursor: "default"
	 	});
	}
	else
	{
		console.log('no stroke');
		textObj = new fabric.Text(nametext, {
			id: 'textobject',
	      	fontFamily: font,
	      	top: (canvas.height / 2),
	      	fill: '#' + FONT_COLOR,
	      	width: canvas.width,
	      	hoverCursor: "default"
	 	});
	}

	emptyCanvas();
  	canvas.add(textObj);

  	setFontSize(textObj);
  	centerText(textObj);

  	setInfo();
}

// for testing in console
function setStroke(color)
{
	textObj.set({ 
		stroke: color,
      	strokeWidth: 2,
      	paintFirst: "stroke",
	});
	canvas.renderAll();
	console.log(color);
}

function getStrokeColor()
{
	let selected_color = $('.cselected').attr('color');

	if(selected_color === 'black')			var stroke = '#f9f9f9';
	else if(selected_color === 'white')		var stroke = '#a6a6a6';
	else if(selected_color === 'red')		var stroke = '#c0392b';
	else if(selected_color === 'orange')	var stroke = '#e67e22';
	else if(selected_color === 'yellow')	var stroke = '#f39c12';
	else if(selected_color === 'green')		var stroke = '#16a085';
	else if(selected_color === 'blue')		var stroke = '#34495e';
	else if(selected_color === 'pink')		var stroke = '#e74c3c';
	else if(selected_color === 'purple')	var stroke = '#f9f9f9';
	else if(selected_color === 'bluegrey')	var stroke = '#f9f9f9';
	else		 							var stroke = '#f9f9f9';

	return stroke;
}

function isSpecialFont(font)
{
	if(font === 'delisha')		return true;
	if(font === 'belisha')		return true;
	if(font === 'freelove')		return true;
	if(font === 'laila')		return true;
	if(font === 'dargelania')	return true;
	else 						return false;
}

function getText(font, input)
{
	let firstletter = '';
	let lastletter = '';
	let specialChars = ['é','è','ê','ë','ì','í','ñ','ò','ó','ô','ö','õ','à','ü','û','î','ï','ç','ù','ú','ö','ô','â','ä','ã','&','.'];

	if(input)
	{
		// fix first letter
		firstletter = input.charAt(0);
		

		if(!specialChars.includes(firstletter)) 
		{
			firstletter = getMappedLetter(firstletter, font, 0);
		}

		// fix last letter
		if(input.length > 1)
		{
			lastletter = input.charAt(input.length - 1);

			if(!specialChars.includes(lastletter)) 
			{
				lastletter = getMappedLetter(lastletter, font, 1);
			}
			
			input = input.slice(1,-1);
			input = firstletter + input + lastletter;
		}
		else
		{
			input = input.replace(input.charAt(0), firstletter);
		}

		return input;
	}
	else
	{
		return '';
	}
}

function getMappedLetter(char, font, leftright)
{
	const alfabeth = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
	let unicode = '';
	
	if(font === 'delisha')
	{
		startleft = 104;
		startright = 78;
	}
	else
	{
		startleft = 26;
		startright = 78;
	}

	// left side
	if(!leftright)
	{
		for (var i = 0; i < alfabeth.length; i++) 
		{
			if(alfabeth[i] === char.toLowerCase())
			{
				if((i + startleft) >= 100)  		unicode = 'E' + (startleft + i);
				else if((i + startleft) >= 10)  	unicode = 'E0' + (startleft + i);
				else 								unicode = 'E00' + (startleft + i);
			}
		}
	}
	// right side
	else
	{
		for (var i = 0; i < alfabeth.length; i++) 
		{
			if(alfabeth[i] === char.toLowerCase())
			{
				if((i + startright) >= 100)  		unicode = 'E' + (startright + i);
				else if((i + startright) >= 10)  	unicode = 'E0' + (startright + i);
				else 								unicode = 'E00' + (startright + i);
			}
		}
	}

	if(char === ' ')	return ' ';
	else 				return JSON.parse(`["\\u${unicode}"]`)[0];
}

function centerText(textObj)
{
	// calculate left offset
	let offset = (canvas.width / 2) - (textObj.width / 2);
	textObj.left = offset;

	// calculate the top offset
	let top = ((canvas.height * 0.82) - (textObj.height / 2));
	textObj.top = top;

	offsettop = top + (textObj.height / 2);
	canvas.renderAll();
}

function setFontSize(textObj)
{
	var calculated = false;

	if(isSpecialFont(font))
	{
		if(CASE_TYPE === 'transparent') 	var max = (canvas.width / 2) * 0.7;
		else 								var max = (canvas.width / 2) * 0.7;
		
		if(font === 'freelove' || font === 'belisha')	var size = max / 3;	
		else 											var size = max / 4;	
	}	
	else
	{
		if(font === 'margo') 		var max = (canvas.width / 2) * 0.7;
		else 						var max = (canvas.width / 2) * 0.6;
		var size = max / 8;	
	} 					

	size = Math.ceil(size);

	do {
		textObj.fontSize = size;
		$('.fontsize').val(size);
		canvas.renderAll();

		if(textObj.width < max)
		{
			fontsize = size;
			calculated = true;
		}
		else
		{
			size = size - 1;
		}

	}
	while (!calculated);
}

function emptyCanvas()
{
	var items = canvas.getObjects();

	for (var i = 0; i < items.length; i++)
	{
		if(i > 0)
		{
			canvas.remove(items[i]);
		}
	}
}

function setInfo()
{
	$('.nametext_info').attr('cwidth' ,canvas.width);
	$('.nametext_info').attr('coffset' ,offsettop);
	$('.nametext_info').attr('cfontsize' ,fontsize);
	$('.nametext_info').attr('cfont' ,font);
	$('.nametext_info').attr('cstroke' ,strokeToggle);
}


$(window).resize(function()
{
	var canvas_container = $('.slider-right').width();

	if(canvas.width != canvas_container)
	{
		console.log('resizing');
		canvas.setWidth(canvas_container)
		canvas.setHeight(canvas_container)
		mockup.scaleToHeight(canvas.height);

		if(textObj)
		{
			setFontSize(textObj);
	  		centerText(textObj);
		}
	}
});

$('.stroke-toggle a').on('click', function(e)
{
	e.preventDefault();

	// set params
	strokeToggle = $(this).attr('strokeonoff');

	// update buttons
	$('.stroke-toggle a').removeClass('selected');
	$(this).addClass('selected');
	setInfo();

	// canvas stroke
	txtChanged($('.nametext').val());
});


$('.create-thumb').on('click', function(e)
{
	e.preventDefault();

	let text = $('.nametext').val();

	if(text)
	{
		// get thumb
		let thumb = $('.thumb').val();

		var url = '/api/createNameThumb/' + encodeURI(thumb) + '/' + encodeURI(text) + '/' + fontsize + '/' + canvas.width + '/' + offsettop + '/' + FONT_COLOR;

		console.log(url);

		$.ajax({
	        type: "GET",

	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        },
	        date:{ "_token": "{{ csrf_token() }}"},
	        url: url,
	        crossDomain: true,
	        //dataType: "jsonp",
		}).done(function(resp)
		{
		 	console.log('resp: '  + resp);
		 	$('.result').html('<img src="'+ resp +'">');
		});
	}
});

$('.create-printfile').on('click', function(e)
{
	e.preventDefault();

	let text = $('.nametext').val();

	if(text)
	{
		// get thumb
		let thumb = $('.thumb').val();

		var url = '/api/createNamePrintfile/' + encodeURI(thumb) + '/' + encodeURI(text) + '/' + fontsize + '/' + canvas.width + '/' + offsettop + '/' + FONT_COLOR;

		$.ajax({
	        type: "GET",
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        },
	        date:{ "_token": "{{ csrf_token() }}"},
	        url: url,
	        crossDomain: true,
	        //dataType: "jsonp",
		}).done(function(resp)
		{
		 	console.log('resp: '  + resp);
		 	$('.printfile').html('<img src="'+ (resp) +'">');
		});
	}
});

$('.phone-color-button').on('click touchstart', function()
{
	$('.btn-cart').attr('phone_color', $(this).attr('color'));
	

    $('.small-thumb').removeClass('selectedThumb');
    $('.small-thumb:first-child').addClass('selectedThumb');

    

    let img = $(this).attr('image');
	mockup.setSrc(img, () => {
        canvas.renderAll()
    });

    $('#canvas').show();
	$('.canvas-container').show();
	$('.main-image').hide();
});

$('.fcolor').on('click', function()
{
	$('.fcolor').removeClass('cselected');
	$(this).addClass('cselected');

	// change the font color
	FONT_COLOR = $(this).attr('code');
	$('.btn-cart').attr('font_color', FONT_COLOR);

	FONT_COLOR = FONT_COLOR.replace('#', '');

	if(strokeToggle == 1)
	{
		textObj.set({ 
			fill: '#' + FONT_COLOR,
			stroke: getStrokeColor(),
	      	strokeWidth: 2,
	      	paintFirst: "stroke",
		});
	}
	else
	{
		textObj.set({ 
			fill: '#' + FONT_COLOR,
		});
	}

	$('.font_color').val('#' + FONT_COLOR);
	canvas.renderAll();
});

$('.personalize-switch').on('click', function(e)
{
	e.preventDefault();

	if($('.personalize-box').hasClass('hidden'))
	{
		$('.personalize-box').removeClass('hidden');
		$('.nametext').focus();
	}
	else
	{
		$('.personalize-box').addClass('hidden');
	}
});

$('.rm-txt').on('click', function(e)
{
	e.preventDefault();
	emptyNameText();
});

function emptyNameText()
{
	$('.nametext').val('');
	txtChanged('');
}

$('.font-fam').on('click', function()
{
	let selected_font = $(this).attr('attr-fontfam');
	font = selected_font;
	$('.fonts .font-fam').removeClass('selected-font');
	$('.fonts .' + selected_font).addClass('selected-font');
	$('.btn-cart').attr('font', font);
	txtChanged($('.nametext').val());
});

$('.nametext-mobile').on('focusin', function()
{
	const id = 'scrolldiv';
	const yOffset = -300; 
	const element = document.getElementById(id);
	const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

	window.scrollTo({top: y, behavior: 'smooth'});
});