//let api_domain = "https://api.verfenbehangland.nl";
let api_domain = "http://verf.test:8888";



$( document ).ready(function() {
    
	$("[color-api]").embedColorSelector();
	
});

$.fn.embedColorSelector = function(element){
	
	return this.each(function(){
				
		let api				= $(this);
		let $color_field	= $( $(this).data("target") ); 
		let $radio_select	= api.closest(".product-option").find("div[aria-label='Kies je Kleur'] label, div[aria-label='Kleur'] label").last();
		
		let $modal 			= $('<div class="color-api-modal">');
		let $dialog			= $('<div class="color-api-dialog-outer">\
									<div class="color-api-dialog">\
										<a class="color-api-dialog-close"></a>\
									<div class="color-api-dialog-body"></div>\
							 	</div>\
							 </div>');
							 
		let $color_preview	= $('<span class="color-api-preview"></span>');
		
		api.settings = {
			css: api_domain +"/css/color-api.css?v=12345678",
			base_url: api_domain,
			parameters:{
				tone: null,
				brand: $(this).data("brand"),
				filter: false
			},
		}
		
		window.onmessage = function(event){

			// only show API messages
			if (event.origin !== api_domain) return;					
			let response = 	event.data.split("||");

		
			$color_field.val(response[0]);
			api.showColorSelected(response[1]);
			api.toggleLayer();
			
		};
		
			
		api.init = function()
		{	

			// load css
			api.loadCss();
			
			// set tone
			api.setColorTone();
			
			// hide color field
			$color_field.closest(".product-configure-custom-option").hide();
			
			// preview color
			$color_preview.insertAfter($color_field);
			
			// button click			
			$radio_select.on("click",function(){
				
				if($("#color-api-frame").length == 0){
					// create layer
					api.createLayer();
				
					// iframe
					api.createFrame();
				}

				// fadeIn
				$modal.fadeIn("fast");
				
				// toggle layer
				api.click(api.toggleLayer);
				
			});
			
			
				
		}
		
		api.setColorTone = function()
		{
	       	
			let tone = $("div[aria-label='Kies je Kleur'], div[aria-label='Kleur']").find("label").last().text().toLowerCase().replace(/\s+/g, '-');
			api.settings.parameters.tone = tone;
			
			return;
			/*
			switch(tone)
			{	
				default:
					api.settings.parameters.tone = "light,dark";
				break;
				
				case "mengen-lichte-kleuren": 
				case "mengen-lichte-kleur": 
					api.settings.parameters.tone = "light";
				break

				case "mengen-donkere-kleuren": 					
				case "mengen-donkere-kleur": 
					api.settings.parameters.tone = "dark";
				break
					
				case "houtkleur-naar-keuze": 
				case "houtkleur-naar-keuze-(+€3,00)":
				case "mengen-tr-kleur":
					api.settings.parameters.tone = "transparant-licht,transparant-donker";
					api.settings.parameters.filter = true;
				break
			}
			
			//console.log(api.settings.parameters.tone);
			*/		
	
		}
		
		api.loadCss = function()
		{
			var head = document.getElementsByTagName('head')[0];
			var style = document.createElement('link');
			style.href = api.settings.css;
			style.type = 'text/css';
			style.rel = 'stylesheet';
			head.append(style);
		}
		
		
		api.createLayer = function()
		{
			$modal.hide().append($dialog);
			$("body").append( $modal );
			
			$modal.find(".color-api-dialog-close").on("click",function(){
				api.toggleLayer();
			});
		}	
		
		
		api.toggleLayer = function()
		{
			$modal.toggle();	
		}	

		
		api.createFrame = function()
		{
			$modal.find(".color-api-dialog-body").prepend('<iframe class="color-api-embed-frame" id="color-api-frame" src="'+ api.getFrameUrl() +'"></iframe>');	
		}
		
		
		api.getFrameUrl = function()
		{
			return api.settings.base_url + "?" + $.param( api.settings.parameters, true );
		}
		
		api.showColorSelected = function(hexcolor)
		{
			$color_preview.css({
				"background-color" : hexcolor,
			});
		}
		
		// init the plugin
	    api.init();
		
	});
	
}