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

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

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    button: {
      setButton: (options: { text: string; href: string; style?: 'solid' | 'outline' }) => ReturnType;
    };
  }
}

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

  group: 'inline',

  inline: true,

  atom: true,

  addAttributes() {
    return {
      text: {
        default: 'Click Here',
      },
      href: {
        default: '#',
      },
      style: {
        default: 'solid',
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: 'a.button',
      },
      {
        tag: 'a.button-outline',
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    const { text, href, style } = HTMLAttributes;
    const className = style === 'outline' ? 'button-outline' : 'button';
    
    const buttonStyle: Record<string, string> = style === 'solid'
      ? {
          display: 'inline-block',
          background: '#7f54b3',
          color: '#fff',
          padding: '14px 28px',
          borderRadius: '6px',
          textDecoration: 'none',
          fontWeight: '600',
          cursor: 'pointer',
        }
      : {
          display: 'inline-block',
          background: 'transparent',
          color: '#7f54b3',
          padding: '12px 26px',
          border: '2px solid #7f54b3',
          borderRadius: '6px',
          textDecoration: 'none',
          fontWeight: '600',
          cursor: 'pointer',
        };

    return [
      'a',
      mergeAttributes(this.options.HTMLAttributes, {
        href,
        class: className,
        style: Object.entries(buttonStyle)
          .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
          .join('; '),
        'data-button': '',
        'data-text': text,
        'data-href': href,
        'data-style': style,
      }),
      text,
    ];
  },

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