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

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

export const Video = Node.create<VideoOptions>({
    name: 'video',

    group: 'block',
    
    // Allows it to be selected and manipulated as a single block
    selectable: true,
    draggable: true,

    addOptions() {
        return {
            HTMLAttributes: {
                class: 'w-full rounded-lg border border-border/50 shadow-sm overflow-hidden my-4',
                controls: true,
            },
        };
    },

    addAttributes() {
        return {
            src: {
                default: null,
            },
        };
    },

    parseHTML() {
        return [
            {
                tag: 'video',
            },
        ];
    },

    renderHTML({ HTMLAttributes }) {
        return ['video', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
    },

    addCommands() {
        return {
            setVideo: (options: { src: string }) => ({ commands }) => {
                return commands.insertContent({
                    type: this.name,
                    attrs: options,
                });
            },
        };
    },
});

declare module '@tiptap/core' {
    interface Commands<ReturnType> {
        video: {
            setVideo: (options: { src: string }) => ReturnType;
        };
    }
}