


Vvveb.ComponentsGroup['Embeds'] = ["embeds/embed"];

Vvveb.Components.extend("_base", "embeds/embed", {
    name: "Embed",
    attributes: ["data-component-oembed"],
    image: "icons/code.svg",
    //dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/maps.png">',
	html: `<div data-component-oembed data-url="">
			<div class="alert alert-light  m-5" role="alert">
				<img width="64" src="${Vvveb.baseUrl}icons/code.svg">
				<h6>Enter url to embed</h6>
			</div></div>`,


    properties: [{
        name: "Url",
        key: "url",
		htmlAttr: "data-url",
        inputtype: TextInput,
        onChange: function(node, value) {
			let element = node[0];
			
			element.innerHTML = `<div class="alert alert-light d-flex justify-content-center">
				  <div class="spinner-border m-5" role="status">
					<span class="visually-hidden">Loading...</span>
				  </div>
				</div>`;
			
			getOembed(value).then(response => {
				  element.innerHTML = response.html;
				  let containerW = node.width();
				  let iframe = $("iframe", element);
				  let ratio = containerW / iframe.width();
				  
				  iframe.attr("width",(i, width) => width * ratio);
				  iframe.attr("height", (i, height) => height * ratio);
				  
			}).catch(error => console.log(error));

			return node;
		},	
    }, {
        name: "Width",
        key: "width",
        child:"iframe",
        htmlAttr: "width",
        inputtype: CssUnitInput
    }, {
        name: "Height",
        key: "height",
        child:"iframe",
        htmlAttr: "height",
        inputtype: CssUnitInput
	}]
});

for (const provider of ["youtube", "vimeo", "dailymotion", "flickr", "smugmug", "scribd", "twitter", "soundcloud", "slideshare", "spotify", "imgur", "issuu", "mixcloud", "ted", "animoto", "tumblr", "kickstarter", "reverbnation", "reddit", "speakerdeck", "screencast", "amazon", "someecards", "tiktok","pinterest", "wolfram", "anghami"])  {
	Vvveb.Components.add("embeds/" + provider, {
		name: ucFirst(provider),
		image: "icons/code.svg",
		html: `<div data-component-oembed data-url="">
				<div class="alert alert-light  m-5" role="alert">
					<img width="64" src="${Vvveb.baseUrl}icons/code.svg">
					<h6>Enter ${provider} url to embed</h6>
				</div></div>`,
	});
	Vvveb.ComponentsGroup['Embeds'].push("embeds/" + provider);
}
