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

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

  group: 'block',

  content: 'inline*',

  parseHTML () {
    return [
      {
        tag: 'div[class="gallery"]',
      }
    ]
  },

  defaultOptions: {
    HTMLAttributes: {
      class: 'gallery',
    }
  },

  addAttributes () {
    return {
      id: {
        default: null,
        parseHTML: element => element.getAttribute('id')
      }
    }
  },

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

  addNodeView () {
    return ({ node }) => {
      const dom = document.createElement('div')
      dom.classList.add('editor-gallery')
      dom.setAttribute('id', node.attrs.id);
      dom.contentEditable = false

      const content = document.createElement('div')
      content.classList.add('content')
      content.contentEditable = false
      content.onclick = (e) => e.preventDefault();

      const buttonEdit = document.createElement('button')
      buttonEdit.innerHTML = 'Редактировать'
      buttonEdit.classList.add('button', 'button-edit')
      buttonEdit.contentEditable = false

      const buttonDelete = document.createElement('button')
      buttonDelete.innerHTML = 'Удалить'
      buttonDelete.classList.add('button', 'button-delete')
      buttonDelete.contentEditable = false

      dom.append(content, buttonEdit, buttonDelete)

      return {
        dom,
        contentDOM: content
      }
    }
  }
})