import { Node } from '@tiptap/core';
import { InputRule } from 'prosemirror-inputrules';
import { initEmojiMap, getAllEmoji } from '~/emoji';

export const emojiInputRegex = /(?:^|\s)((?::)((?:\w+))(?::))$/;

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

  inline: true,

  group: 'inline',

  draggable: true,

  addAttributes() {
    return {
      moji: {
        default: null,
        parseHTML: (element) => element.textContent,
      },
      name: {
        default: null,
        parseHTML: (element) => element.dataset.name,
      },
      title: {
        default: null,
      },
      unicodeVersion: {
        default: '6.0',
        parseHTML: (element) => element.dataset.unicodeVersion,
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: 'gl-emoji',
      },
    ];
  },

  renderHTML({ node }) {
    return [
      'gl-emoji',
      {
        'data-name': node.attrs.name,
        title: node.attrs.title,
        'data-unicode-version': node.attrs.unicodeVersion,
      },
      node.attrs.moji,
    ];
  },

  addInputRules() {
    return [
      new InputRule(emojiInputRegex, (state, match, start, end) => {
        const [, , name] = match;
        const emojis = getAllEmoji();
        const emoji = emojis[name];
        const { tr } = state;

        if (emoji) {
          tr.replaceWith(start, end, [
            state.schema.text(' '),
            this.type.create({ name, moji: emoji.e, unicodeVersion: emoji.u, title: emoji.d }),
          ]);

          return tr;
        }

        return null;
      }),
    ];
  },

  onCreate() {
    initEmojiMap();
  },
});