import './style.scss';
import './editor.scss';

import { registerBlockStyle, registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

const NAMESPACE = 'namespace'; // TODO
const SLUG = 'slug'; // TODO
const BLOCK_TITLE = 'Block Title'; // TODO

const INNER_TEMPLATE = [
	['core/heading', { placeholder: 'Article Title', className: 'heading' }],
	['core/paragraph', { placeholder: 'Article Text', className: 'text' }],
];

registerBlockType(`${NAMESPACE}/${SLUG}`, {
	title: __(BLOCK_TITLE, SLUG),

	category: 'widgets',

	supports: {
		// Removes support for an HTML mode.
		html: false,
	},

	attributes: {
		text: {
			type: 'string',
			source: 'text',
			selector: 'p',
			default: __('Some default text.', NAMESPACE),
		},
	},

	edit({ attributes, className }) {
		return (
			<div className={className}>
				<div>
					<InnerBlocks template={INNER_TEMPLATE} templateLock="all" />
				</div>
				<p>{attributes.text}</p>
			</div>
		);
	},

	save({ attributes }) {
		return (
			<div>
				<div>
					<InnerBlocks.Content />
				</div>
				<p>{attributes.text}</p>
			</div>
		);
	},
});

registerBlockStyle(`${NAMESPACE}/${SLUG}`, {
	name: 'block-style',
	label: __('A Block Variation', NAMESPACE),
	isDefault: false,
});