import { Plugin } from 'prosemirror-state';
import type { EditorState, PluginKey, TextSelection, Transaction } from 'prosemirror-state';
import type { EditorView } from 'prosemirror-view';

// refer to https://github.com/ProseMirror/prosemirror-inputrules/blob/master/src/inputrules.ts

type PluginState = { transform: Transaction; from: number; to: number; text: string } | null;

declare class InputRule {
  match: RegExp;
  handler: (state: EditorState, match: RegExpMatchArray, start: number, end: number) => Transaction | null;
  undoable: boolean;
  inCode: boolean | 'only';
}

export function inputRulePlugin({ rules, key }: { rules: readonly InputRule[]; key: PluginKey }) {
  const plugin: Plugin<PluginState> = new Plugin<PluginState>({
    // 该插件的 key
    key,
    // 该插件自定义的状态
    // 其值可能是 null 或是 {transform: tr, from, to, text}
    // 用于记录最近的一次由于输入规则成功匹配而触发的 transform 操作及相关信息，便于实现 undoInputRule 指令（撤销由于满足输入规则导致的文档更新）
    state: {
      // 初始状态是 null
      init() { return null; },
      // 更新状态（将给定的事务 tr 应用到插件的状态，以生成一个新的状态）
      // prev 是插件的当前状态值（即旧的状态值，还没有根据 tr 进行更新）
      apply(tr, prev) {
        // 获取存储在当前事务 tr 中的元信息，键名为 plugin
        const stored = tr.getMeta(plugin);
        // 如果存在相应的元信息，将其返回作为该插件的新状态
        // 该值的类型是 {transform: tr, from, to, text} 它是在用户输入文本时，如果与（通过该插件所有添加的）任何一个输入规则相匹配，就会执行预设的操作，并分发事务 tr 来将更改应用到编辑器，而在该事务 tr 中就添加了上述元信息
        // 具体逻辑可以查看后面的函数 run
        if (stored) return stored;
        // 如果当前事务 tr 中没有找到相应的元信息，而且该事务导致文档选区或内容的改变，则返回 null（以清空存储在插件的状态中的，最近一次由于输入规则所导致的文档变更信息）
        return tr.selectionSet || tr.docChanged ? null : prev;
      },
    },
    // 监听相关输入操作，以对输入的内容进行模式匹配，具体操作封装在 run 函数中
    props: {
      handleTextInput(view, from, to, text) {
        return run(view, from, to, text, rules, plugin);
      },
      handleDOMEvents: {
        compositionend: (view) => {
          setTimeout(() => {
            const { $cursor } = view.state.selection as TextSelection;
            if ($cursor) run(view, $cursor.pos, $cursor.pos, '', rules, plugin);
          });
        },
      },
    },

    // 为该插件所自定义的属性，以表示该插件是为编辑器添加输入规则的
    isInputRules: true,
  });

  return plugin;
};

const MAX_MATCH = 500; // 设置所需匹配的最大字符数量

// 当用户输入内容时会运行以下函数，对输入的文字（及其前方的部分内容）进行正则表达式的匹配
// 在用户每次敲击键盘输入时，handleTextInput 都会触发 run 运行，所传入的参数会根据输入的情况而不同：
// * 若采用的是「合成输入」法，则输入过程中，参数 from 和 to 是相同的，都是输入字符后光标所在的位置，参数 text 是键盘当前所按下的单个字符；而输入结束时，参数 from 和 to 是这一次「合成输入」所累计键入的字符片段的开头和结尾的位置，参数 text 则是最终所「合成」的文字片段（所以 from 和 to 并不一定是最终显示在页面上的内容的开始和结束位置）
// * 若采用用普通的输入法，则参数 from 和 to 总是相同的，都是输入字符后光标所在的位置，参数 text 是键盘当前所按下的单个字符
// 而 compositionend 触发 run 运行只会发生在「合成输入」结束时，但是参数 from 和 to 是相同的，都是「合成输入」最后键入的字符的右侧（该位置并不一定是最终显示在页面上的内容的右侧位置）
function run(view: EditorView, from: number, to: number, text: string, rules: readonly InputRule[], plugin: Plugin) {
  if (view.composing) return false; // 如果当前处于「合成输入」，则不进行处理

  const state = view.state;
  const $from = state.doc.resolve(from);

  // 获取所需匹配的字符串，包括当前输入的内容 text，以及从它的前方所截取的部分内容
  // 从输入开始位置的前面截取内容：
  // * 起始位置：$from.parentOffset（输入开始时相对于父节点内容开头的位置）向前 MAX_MATCH 个字符的位置，但是最小值是 0（即该父节点内容的开始位置）
  // * 结束位置：输入开始时的位置
  // 如果截取内容中包含非文本的叶子节点（例如图片），则使用 '\ufffc'（对象替代字符）将其转译为字符
  const textBefore = $from.parent.textBetween(Math.max(0, $from.parentOffset - MAX_MATCH), $from.parentOffset, null, '\ufffc') + text;

  // 遍历该插件所添加的输入规则 rules，对光标前方的 textBefore 字符串进行匹配
  for (let i = 0; i < rules.length; i++) {
    const rule = rules[i];

    // 需要考虑所需匹配的字符串是否包含 code 代码，以及当前所遍历的输入规则 rule 是否适用于对代码进行匹配
    if ($from.parent.type.spec.code) {
      if (!rule.inCode) continue;
    }
    else if (rule.inCode === 'only') {
      continue;
    }

    // 使用当前所遍历的输入规则 rule 的正则表达式 match 对字符串进行匹配
    const match = rule.match.exec(textBefore);

    // 如果匹配成功，则调用当前所遍历的输入规则 rule 所预设的处理器 handler
    // 如果返回一个事务 tr 则后续可以通过编辑器视图进行分发，来触发编辑器更新
    const tr = match && rule.handler(state, match, from - (match[0].length - text.length), to);
    if (!tr) continue;

    // 如果该输入规则对文档的处理是可撤销 undoable
    // 则为即将分发的事务 tr 添加元信息（将该操作存储到该插件的自定义状态中）
    if (rule.undoable) tr.setMeta(plugin, { transform: tr, from, to, text });

    // 分发事务
    view.dispatch(tr);
    return true;
  }
  return false;
}