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

import { StepByStepNode } from './react-node/step-by-step-node';

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

declare module '@tiptap/core' {
	interface Commands<ReturnType> {
		stepByStep: {
			/**
			 * Toggle step by step component
			 */
			toggleStepByStep: () => ReturnType;
		};
	}
}

export const StepByStep = Node.create<StepByStepOptions>({
	name: 'stepByStep',
	group: 'block',
	content: 'inline*',
	draggable: true,
	parseHTML() {
		return [
			{
				tag: 'step-by-step-node',
				preserveWhitespace: 'full'
			}
		];
	},

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

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

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

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

	addAttributes() {
		return {
			content: {
				default: '1'
			}
		};
	}
});