import { registerBlockType } from '@wordpress/blocks';
import PlanadayBlock from './planadayBlock';

/**
 * Define a custom SVG icon for the block. This icon will appear in
 * the Inserter and when the user selects the block in the Editor.
 */
const calendarIcon = (
	<svg
		viewBox="0 0 24 24"
		xmlns="http://www.w3.org/2000/svg"
		aria-hidden="true"
		focusable="false"
	>
		<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
	</svg>
);

/**
 * @param {string} name
 * @param {string} title
 * @param {string[]} templates
 * @param {string} renderEndpoint
 */
function planadayRegisterBlock(name, title, templates, renderEndpoint){
	registerBlockType( name, {
		icon: calendarIcon,
		edit: (props) => {
			return <PlanadayBlock {...props} tagName={name} allowedTemplates={templates} renderEndpoint={renderEndpoint} title={title} />
		},
		title: title,
	} );
}

setInterval(() => {
	document.querySelectorAll("script.pad-script").forEach(oldElement => {
		const script = oldElement.innerText;
		const scriptElement = document.createElement("script");
		scriptElement.type = "module";
		scriptElement.innerText = script;
		oldElement.parentNode.replaceChild(scriptElement, oldElement);
	})
}, 500);

window.planadayRegisterBlock = planadayRegisterBlock;