$(document).off('popin:opened:before');

$(document).on('popin:opened:before', '#popinAddText', function(e) {
	e.preventDefault();
	if ($('#color-panel').length == 0) {
		var inputs = document.querySelectorAll('.choose_color');
		let optionsColorPictor = {
			elementToRun: inputs,
			user_id: $('.choose_color').attr('user_id'),
			without_public: config.colorPictor_without_public
		}
		$('#popinAddText').colorPictor(optionsColorPictor);
	}
	
	if (config.choose_techno_on_addtext) {
		let view_zones = config.design_canvas[config.view_select].getObjects();
		
		let zones = $('.text-options.zone select');
		if (zones.length > 0) 
			zones.children().remove();
		else
        	zones = $('<select name="techno_text">');
		
        for (let zone in view_zones) {
			let element = view_zones[zone];
			if (element.hasOwnProperty('des_type') && element.des_type == 'zone') {
				let zoneLi = `  <option value="${element.label}">${element.displayName}</option>`;
					zones.append(zoneLi);
	
			}
		}
        
        $('.text-options.zone').append(zones);

		let all_technos = config.zonesparams[$('.text-options.zone select').val()].technos;

		let text_opt = $(this).find('.text-options.tech');
		if (!text_opt.length) {
			text_opt = $('<div class="text-options">');
			$(this).find('.popin-body').prepend(text_opt);
		}
		else
			text_opt.html('');

		if ($('.text-options.tech select').length == 0) {
			let techno_select = $('<select name="techno_text">');
			techno_select.append($(`<option value="" hidden>${config.useTranslate('choose_marking_type')}</option>`))
			for (i_techno in all_technos) {
				let current_techno = all_technos[i_techno];
				techno_select.append($(`<option value="${current_techno.id}" data-ref="${current_techno.reference}">${current_techno.name}</option>`));
			}
			text_opt.append(techno_select);
		}

		let bg;
		if(config.c2f.parameters.colorable !== undefined) {
			bg = "#" + $('#panneau .content_panneau #VotreProduitContain #pastilles_de_couleurs .btncolorizeJS.selected').attr("color");
			$('.preview_zone').css('background', bg);
		}
		if(bg === "#FFFFFF" || config.c2f.parameters.colorable === undefined) {
			bg = config.zonesparams[$('.text-options.zone select').val()].background;
			$('.preview_zone').css('background', bg);
		}
		
		if ($('.text-options.font option').length == 0) {
			let clonedFontSelect = $('.switchpolice select').clone();
			clonedFontSelect.removeClass('spSelect');
			clonedFontSelect.removeClass('fontswitch').attr('name', 'font_text');
			$('.text-options.font').append(clonedFontSelect);
			$('.text-options.font option').first().remove();
			replacePolice(clonedFontSelect);
			$('#popinAddText .preview_zone p').css('font-family', $('#popinAddText .config_select.font select').val()) 
		}
		

	}

	openPopIn($(this));
});


$(document).on('input', '#popinAddText .input_text textarea#valeur_texte', function(e) {
    let value = $('#popinAddText .input_text textarea#valeur_texte').val();
	$('.preview_zone p').html( nl2br(value.replace(/(<([^>]+)>)/gi, "")));
});

$(document).on('click', '#popinAddText .config_edit .choose_font_style .box', function(e) {
	$(this).toggleClass('active');
	let style = $(this).attr('font_style');
	$('.preview_zone p').toggleClass(style);
});

$(document).on('click', '#popinAddText .config_edit .choose_align .box', function(e) {
	let style = $(this).attr('align');
	let css = 'text-align';
	$('.preview_zone p').css(css, style);
	$('#popinAddText .config_edit .choose_align .box.active').removeClass('active');
	$(this).addClass('active');
});

$(document).on('change', '.text-options.font select', function(e) {
	$('.preview_zone p').css('font-family', "'" + $(this).val() + "'")
});

$(document).ready(function () {
	$(document).click(function() {
		$('.color-control').hide();
	});

	$('#popinAddText .choose_color .code_box .color_code').text('Pantone Black C');
	$('#popinAddText .choose_color .code_box .color_box').css('background', '#000000');

	$('#popinAddText').on('colorpictorChange', function(event, color, item){
		$('.preview_zone p').css('color', color.hexa);
		$('#popinAddText .choose_color').attr('data-color', color.hexa);
		$('#popinAddText .choose_color').attr('collection', color.collection);
		$('#popinAddText .choose_color').attr('name', color.name);
		$('#popinAddText .choose_color').attr('data-id', color.id);
		$('#popinAddText .choose_color').attr('r', color.r);
		$('#popinAddText .choose_color').attr('g', color.g);
		$('#popinAddText .choose_color').attr('b', color.b);
		$('#popinAddText .choose_color .color_box').css('background', color.hexa);
		$('#popinAddText .choose_color .color_code').text(color.ref);
	});

	$('#popinAddText .text_equal_products .info').hover(function () {
			$(this).siblings('.info_tip').addClass('show');
		}, function () {
			$(this).siblings('.info_tip').removeClass('show');
		}
	);
});
$(document).off('click', '#submit_popup_text');

$(document).on('click', '#submit_popup_text',function(){

	if ($('#valeur_texte').val() !== '') {
		let text_opt = $('#popinAddText').find('.text-options');
		let styles = {};

		let font_family = text_opt.find('select[name="font_text"]').val();
		let fill = $('#popinAddText .choose_color').attr('data-color');
		let font_weight = $('#popinAddText .choose_font_style .box.active[font_style="bold"]').attr('font_style');
		let font_style = $('#popinAddText .choose_font_style .box.active[font_style="italic"]').attr('font_style');
		let font_decoration = $('#popinAddText .choose_font_style .box.active[font_style="underline"]').attr('font_style');
		let font_align = $('#popinAddText .choose_align .box.active[align]').attr('align');

		let techno = $(".text-options.tech select").val();
		let techno_ref = (techno == 'undefined') ? $(".text-options.tech select option:selected").data('ref') : $(`.text-options.tech select option[value='${techno}']`).data('ref');

		if (font_family)
			styles.fontFamily = font_family;
		if (fill) {
			styles.fill = fill;
			styles.r = $('#popinAddText .choose_color').attr("r");
			styles.g = $('#popinAddText .choose_color').attr("g");
			styles.b = $('#popinAddText .choose_color').attr("b");
			styles.id = $('#popinAddText .choose_color').attr("data-id")
			styles.collection = $('#popinAddText .choose_color').attr("collection")
		}
		if (font_weight)
			styles.fontWeight = font_weight;
		if (font_style)
			styles.fontStyle = font_style;
		if (font_decoration)
			styles.underline = true;
		

		let zone_selected = $('.text-options.zone select').val();
		let zones = config.design_canvas[config.view_select].getObjects();
		let zone = zones.find(e => e.label == zone_selected && e.des_type == 'zone');

		ajouteTexte(zone, styles);
		if((techno_ref !== undefined) && (config.zonesparams[zone_selected].des_typemarquage !== undefined)){
			config.zonesparams[zone_selected].des_typemarquage = techno_ref
		}

		if (fill) {
			var params = {'collection' : $('#popinAddText .choose_color').attr("collection"), 'id' : $('#popinAddText .choose_color').attr("data-id"), 'name' : $('#popinAddText .choose_color').attr("name"), 'r': $('#popinAddText .choose_color').attr("r"), 'g': $('#popinAddText .choose_color').attr("g"), 'b': $('#popinAddText .choose_color').attr("b")};
			config.setTextProperty('fill', fill, params);
		}	
		if (font_align) {
			config.TextAlign(font_align);
			config.setTextProperty('text-align', font_align);
		}

		if (font_family)
			forceSpSelectValue($('.editrow select.fontswitch'), font_family);
	} else
		closePopIn('#popinAddText');

	resetInputPopin();
	config.updateZoneList();
	config.des_render();
});

$(document).on('change', '.text-options.zone select', function() {
	let bg = config.zonesparams[$(this).val()].background;
	$('.preview_zone').css('background', bg);

	let all_technos = config.zonesparams[$(this).val()].technos;
	let techno_select = $('.text-options.tech select');
	$(techno_select).children().remove();
	techno_select.append($(`<option value="" hidden>${config.useTranslate('choose_marking_type')}</option>`))
	for (i_techno in all_technos) {
		let current_techno = all_technos[i_techno];
		techno_select.append($(`<option value="${current_techno.id}" data-ref="${current_techno.reference}">${current_techno.name}</option>`));
	}
});

$(document).off('keyup', '#valeur_texte');

function nl2br (str, is_xhtml) {
    if (typeof str === 'undefined' || str === null) {
        return '';
    }
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

function resetInputPopin() {
	$('#popinAddText .preview_zone p').html('');
	$('#popinAddText .preview_zone').css('text-align', 'unset');
	$('#popinAddText .choose_align .box.active').removeClass('active');
	$('#popinAddText .choose_align .box[align="left"]').addClass('active');
	$('#popinAddText .preview_zone p').removeClass('bold italic underline');
	$('#popinAddText .choose_font_style .box.active').removeClass('active');
	$('#popinAddText #text_equal').prop('checked', true)
	$('#popinAddText #valeur_texte').css('text-align', 'left')
}

$(document).on('click', '[action="cotteditaddtext"]', function() {
	if ($(document).find('.chooseCollection[selected]').length) 
		$('#colCollection').val($(document).find('.chooseCollection[selected]').val()).trigger('change')
	else 
		$('#colCollection').val($(document).find('.chooseCollection:first-child').val()).trigger('change')
    $("[popin='#popinAddText']").click();
});