import { Node, mergeAttributes } from '@tiptap/core';
import { ReactNodeViewRenderer, NodeViewWrapper } from '@tiptap/react';
import type { NodeViewProps } from '@tiptap/react';
import { IconClose } from '@douyinfe/semi-icons';
import React from 'react';
import { getCustomSlotAttribute } from '@douyinfe/semi-foundation/aiChatInput/utils';

function SkillSlotComponent(props: NodeViewProps) {
    const { node, editor } = props;
    
    const value: string = node.attrs.label ?? node.attrs.value ?? '';

    const onRemove = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        editor?.commands.clearContent();
    };

    if (value === '') {
        return null;
    }

    return (
        <NodeViewWrapper className="skill-slot-wrapper">
            <span className='skill-slot'>
                {value}
                <IconClose
                    onClick={onRemove}
                    className='skill-slot-delete'
                />
            </span>
        </NodeViewWrapper>
    );
}

const SkillSlot = Node.create({
    name: 'skillSlot',
    inline: true,
    group: 'inline',
    atom: true,

    selectable: false,

    addAttributes() {
        return {
            value: {
                default: '',
                parseHTML: (element: HTMLElement) => (element as HTMLElement).getAttribute('data-value'),
                renderHTML: (attributes: Record<string, any>) => ({ 'data-value': attributes.value }),
            },
            label: {
                parseHTML: (element: HTMLElement) => (element as HTMLElement).getAttribute('data-label'),
                renderHTML: (attributes: Record<string, any>) => ({ 'data-label': attributes.label }),
            },
            hasTemplate: {
                parseHTML: (element: HTMLElement) => (element as HTMLElement).getAttribute('data-template') === 'true',
                renderHTML: (attributes: Record<string, any>) => ({ 'data-template': attributes.hasTemplate }),
            },
            isCustomSlot: getCustomSlotAttribute(),
        };
    },

    parseHTML() {
        return [{
            tag: 'skill-slot',
        }];
    },

    renderHTML({ HTMLAttributes: htmlAttributes }) {
        return ['skill-slot', mergeAttributes(htmlAttributes)];
    },

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

export default SkillSlot;