import {
	useBlockProps as blockProps,
	InnerBlocks,
} from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';
import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
import blockConfig from './block.json';
import { Controls } from './editor/Controls';
import { ToolbarMenu } from './editor/ToolbarMenu';
import './front/style.css';
import { blockIcon } from './icons';

export type Attributes = {
	animatein: string;
	enabled: 1 | 0;
	once: 1 | 0;
	direction: 1 | -1 | 0;
	threshold: number;
	timing: number;
	offset: string;
};

registerBlockType<Attributes>(blockConfig.name, {
	...blockConfig,
	icon: blockIcon,
	// These attributes are duplicated here for TypeScript types (DefinitelyTyped)
	// Which seemingly isn't up to date with the Gutenberg Block schema.
	// Not 100% sure.
	attributes: {
		animatein: {
			type: 'string',
			default: 'animate-in-view',
		},
		enabled: {
			type: 'number',
			default: 1,
		},
		once: {
			type: 'number',
			default: 1,
		},
		direction: {
			type: 'number',
			default: 1,
		},
		threshold: {
			type: 'number',
			default: 1.0,
		},
		timing: {
			type: 'number',
			default: 1.0,
		},
		offset: {
			type: 'string',
			default: '2rem',
		},
	},
	title: __('Animate In View', 'animate-in-view'),
	edit: ({ attributes, setAttributes }) => (
		<>
			<Controls attributes={attributes} setAttributes={setAttributes} />
			<div {...blockProps()}>
				<InnerBlocks template={[['core/group', {}]]} />
			</div>
		</>
	),
	save: ({ attributes }) => {
		return (
			<div {...blockProps.save()} {...attributes}>
				<InnerBlocks.Content />
			</div>
		);
	},
});

// Let other blocks wrap themselves with this block.
addFilter(
	'editor.BlockEdit',
	blockConfig.name,
	// Gutenberg seems to require this to be a function.
	(CurrentMenuItems) => (props: any) => ToolbarMenu(CurrentMenuItems, props),
);