/**
 * Vvveb
 *
 * Copyright (C) 2021  Ziadin Givan
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * https://github.com/givanz/Vvveb
 */

ImageInput = { ...ImageInput, ...{

	tag: "img",
	
    events: [
        ["change", "onImageChange", "input[type=text]"],
        ["click", "onClick", "button"],
        ["click", "onClick", "img"],
	 ],

	setValue: function(value) {
		if (value && value.indexOf("data:image") == -1 && value != "none") {
				this.element[0].querySelector('input[type="text"]').value = value;
				//$('input[type="text"]', this.element).val(value);
				let src = (value.indexOf("//") > -1 || value.indexOf("media/") > -1 || value.indexOf("image-cache/") > -1 || value[0] == '/' ? '' : Vvveb.themeBaseUrl) + value;
				this.element[0].querySelector(this.tag).src = src;
				//$(this.tag, this.element).attr("src", src);
		} else {
			this.element[0].querySelector(this.tag).src = Vvveb.baseUrl + 'icons/image.svg';
			///$(this.tag, this.element).attr("src", Vvveb.baseUrl + 'icons/image.svg');
		}
	},

    onImageChange: function(event, node, input) {
		//set initial relative path
		let self = this;
		let src = self.value;
		let tag = input.tag;

		let img = node.querySelector(tag);
		if (img.src) {
			src = img.getAttribute("src");
		}
		
		if (src) {
			input.value = src;
			input.onChange.call(self, event, node, input);
			//e.data.element.trigger('propertyChange', [src, this]);
		}
		
		//reselect image after loading to adjust highlight box size
		let onLoad = function () {
				if (Vvveb.Builder.selectedEl) {
					Vvveb.Builder.selectNode(Vvveb.Builder.selectedEl);
					Vvveb.Builder.loadNodeComponent(Vvveb.Builder.selectedEl);
				}
		};
		
		Vvveb.Builder.selectedEl.addEventListener("load", onLoad);
	},
		
    
    onClick: function(e, element) {
		if (!Vvveb.MediaModal) {
			Vvveb.MediaModal = new MediaModal(true);
			//Vvveb.MediaModal.mediaPath = window.mediaPath;
		}
		
		Vvveb.MediaModal.open(this.closest("[data-target-input]"));
    },
    
	init: function(data) {
		return this.render("imageinput-gallery", data);
	},
  }
}

VideoInput = { ...ImageInput, ...{
	tag:"video",

    events: [
        ["change", "onImageChange", "input[type=text]"],
        ["click", "onClick", "button"],
        ["click", "onClick", "video"],
	 ],

	
	init: function(data) {
		return this.render("videoinput-gallery", data);
	},
  }
}

SvgInput = { ...ImageInput, ...{
	tag:"svg",

    events: [
        ["change", "onChange", "input[type=text]"],
        ["click", "onClick", "button"],
        ["click", "onClick", "svg"],
	 ],

	
	init: function(data) {
		return this.render("svginput-gallery", data);
	},
	
	setValue: function(value) {
		if (this.element[0] && value) {
			let input = this.element[0].querySelector('svg');
		
			if (input) { 
				input.innerHTML = value;
			}
		}
	},
	
	onChange: function(event, node, input) {
		if (event && event.target) {
			let self = this;
			let value = this.value;
			let src = mediaPath + value;
			let currentTarget = event.currentTarget;

			fetch(src)
			.then(res => res.text())
			.then(value => {
				//const e = new CustomEvent('propertyChange', { detail: {value, input: self, origEvent:event} });
				//currentTarget.dispatchEvent(e);
	
				let element = Vvveb.Builder.selectedEl;
				let newElement = generateElements(value)[0];
				let attributes = element.attributes;
				
				//keep old svg size and colors
				for (let i = 0; i < attributes.length; i++) {
					let attr = attributes[i];
					if (attr.name && attr.name != "viewBox") {
						newElement.setAttribute(attr.name, attr.value);
					}
				}
			
				element.replaceWith(newElement);
				Vvveb.Builder.selectedEl = newElement;

				if (Vvveb.Builder.selectedEl) {
					Vvveb.Builder.selectNode(Vvveb.Builder.selectedEl);
					let svg = node.querySelector('svg')
					svg.innerHTML = newElement.innerHTML;
					svg.setAttribute('viewBox', newElement.getAttribute('viewBox'));
					//Vvveb.Builder.loadNodeComponent(Vvveb.Builder.selectedEl);
				}
			})
			
			//event.data.element.trigger('propertyChange', [this.value, this, event]);
		}
	},
	
	 onImageChange: function(event, node, input) {
	 }
  }
}
