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

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    Article: {
      toggleArticle: () => ReturnType
      setArticleFloat: (float: null | 'left' | 'half-left' | 'right' | 'half-right') => ReturnType
      setArticleBg: (bg: null | string) => ReturnType
    }
  }
}

export default Node.create({
  name: 'article',

  defaultOptions: {
    HTMLAttributes: {
      'data-type': 'incut'
    }
  },
  group: 'block',
  content: 'block+',

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

  renderHTML({ HTMLAttributes }) {
    return ['article', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
  },

  addAttributes() {
    return {
      'data-float': {
        default: null
      },
      'data-bg': {
        default: null
      }
    }
  },

  addCommands() {
    return {
      toggleArticle:
        () =>
        ({ commands }) => {
          return commands.toggleWrap('article')
        },
      setArticleFloat:
        (value) =>
        ({ commands }) => {
          return commands.updateAttributes(this.name, { 'data-float': value })
        },
      setArticleBg:
        (value) =>
        ({ commands }) => {
          return commands.updateAttributes(this.name, { 'data-bg': value })
        }
    }
  }
})