import { mergeAttributes, Node } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';

import { ButtonNode } from './react-node/button-node';

export interface ButtonOptions {
	HTMLAttributes: Record<string, any>;
}

declare module '@tiptap/core' {
	interface Commands<ReturnType> {
		button: {
			/**
			 * Toggle a button
			 */
			toggleButton: () => ReturnType;
		};
	}
}

export const Button = Node.create<ButtonOptions>({
	name: 'button',

	group: 'block',

	content() {
		return 'text*';
	},
	draggable: true,
	parseHTML() {
		return [
			{
				tag: 'button-node',
				preserveWhitespace: 'full'
			}
		];
	},

	addOptions() {
		return {
			HTMLAttributes: {}
		};
	},

	renderHTML({ HTMLAttributes }) {
		return ['button-node', mergeAttributes(HTMLAttributes), 0];
	},

	addNodeView() {
		return ReactNodeViewRenderer(ButtonNode);
	},

	addCommands() {
		return {
			toggleButton:
				() =>
				({ commands }) => {
					return commands.insertContent({ type: this.type.name });
				}
		};
	}
});