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

/**
 * Toggle Block (collapsible section) — uses native <details>/<summary>.
 *
 * Creates a collapsible section in the document that the reader can
 * expand/collapse by clicking the summary. Content inside is fully
 * editable and collaborative via Yjs.
 *
 * Slash command: /toggle
 */

export const ToggleBlock = Node.create({
  name: 'details',

  group: 'block',
  content: 'detailsSummary block+',
  defining: true,

  addAttributes() {
    return {
      open: {
        default: true,
        parseHTML: (el) => el.hasAttribute('open'),
        renderHTML: (attrs) => (attrs.open ? { open: '' } : {}),
      },
    };
  },

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

  renderHTML({ HTMLAttributes }) {
    return ['details', mergeAttributes(HTMLAttributes, { class: 'toggle-block' }), 0];
  },

  addCommands() {
    return {
      insertToggleBlock:
        () =>
        ({ commands }) => {
          return commands.insertContent({
            type: 'details',
            attrs: { open: true },
            content: [
              { type: 'detailsSummary', content: [{ type: 'text', text: 'Toggle heading' }] },
              { type: 'paragraph' },
            ],
          });
        },
    };
  },
});

export const ToggleSummary = Node.create({
  name: 'detailsSummary',

  group: 'block',
  content: 'inline*',
  defining: true,

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

  renderHTML({ HTMLAttributes }) {
    return ['summary', mergeAttributes(HTMLAttributes, { class: 'toggle-summary' }), 0];
  },
});