import React from 'react';
import { registerBlockType } from '@wordpress/blocks';
import logo from './assets/logo';
import BlockEdit from './block/BlockEdit';
import { AuthenticationContextConsume } from './authentication/AuthenticationStoreContainer';

// @ts-ignore
const wp = window.wp;
const registerBlockTypeGlobal = wp.blocks.registerBlockType as typeof registerBlockType;
registerBlockTypeGlobal('dot-press/widget', {
	title: 'DOT Widget',
	description: 'Embeddable DOT Audiences Widget',
	icon: logo,

	category: 'embed',
	keywords: ['dot', 'widget', 'ads'],
	attributes: {
		src: {
			type: 'string',
		},
	},
	edit: (props) => {
		const setSrc = (newSrc: string) => props.setAttributes({ src: newSrc });
		return (
			<AuthenticationContextConsume>
				{({ token }) => {
					return <BlockEdit src={props.attributes.src as string} setSrc={setSrc} />;
				}}
			</AuthenticationContextConsume>
		);
	},
	save: (props) => {
		return <p>{props.attributes.src as string}</p>;
	},
});