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

import { AlertNode } from './react-node/alert-node';

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

declare module '@tiptap/core' {
	interface Commands<ReturnType> {
		alert: {
			/**
			 * Toggle an alert
			 */
			toggleAlert: (color: string) => ReturnType;
		};
	}
}

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

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

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

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

	addCommands() {
		return {
			toggleAlert:
				(color: string) =>
				({ commands }) => {
					return commands.insertContent({ type: this.type.name, attrs: { color } });
				}
		};
	},

	addAttributes() {
		return {
			title: {
				default: 'Let op'
			},
			color: {
				default: ''
			}
		};
	}
});