import { action, IReactionDisposer, reaction } from "mobx";
import { baseKeymap } from "prosemirror-commands";
import { history, redo, undo } from "prosemirror-history";
import { keymap } from "prosemirror-keymap";
import { EditorState, Transaction, } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { schema } from "./RichTextSchema";
import React = require("react")
import "./TooltipTextMenu.scss";
const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
import { library } from '@fortawesome/fontawesome-svg-core'
import { wrapInList, bulletList } from 'prosemirror-schema-list'
import {
  faListUl,
} from '@fortawesome/free-solid-svg-icons';



export class TooltipTextMenu {

  private tooltip: HTMLElement;

  constructor(view: EditorView) {
    this.tooltip = document.createElement("div");
    this.tooltip.className = "tooltipMenu";

    //add the div which is the tooltip
    view.dom.parentNode!.appendChild(this.tooltip);

    //add additional icons
    library.add(faListUl);

    //add the buttons to the tooltip
    let items = [
      { command: toggleMark(schema.marks.strong), dom: this.icon("B", "strong") },
      { command: toggleMark(schema.marks.em), dom: this.icon("i", "em") },
      { command: toggleMark(schema.marks.underline), dom: this.icon("U", "underline") },
      { command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough") },
      { command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript") },
      { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") },
      { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") },
    ]
    items.forEach(({ dom }) => this.tooltip.appendChild(dom));

    //pointer down handler to activate button effects
    this.tooltip.addEventListener("pointerdown", e => {
      e.preventDefault();
      view.focus();
      items.forEach(({ command, dom }) => {
        if (dom.contains(e.srcElement)) {
          command(view.state, view.dispatch, view)
        }
      })
    })

    this.update(view, undefined);
  }

  // Helper function to create menu icons
  icon(text: string, name: string) {
    let span = document.createElement("span");
    span.className = "menuicon " + name;
    span.title = name;
    span.textContent = text;
    return span;
  }

  blockActive(view: EditorView) {
    const { $from, to } = view.state.selection

    return to <= $from.end() && $from.parent.hasMarkup(schema.nodes.bulletList);
  }

  //this doesn't currently work but hopefully will soon
  unorderedListIcon(): HTMLSpanElement {
    let span = document.createElement("span");
    let icon = document.createElement("FontAwesomeIcon");
    icon.className = "menuicon fa fa-smile-o";
    span.appendChild(icon);
    return span;
  }

  // Create an icon for a heading at the given level
  heading(level: number) {
    return {
      command: setBlockType(schema.nodes.heading, { level }),
      dom: this.icon("H" + level, "heading")
    }
  }

  //updates the tooltip menu when the selection changes
  update(view: EditorView, lastState: EditorState | undefined) {
    let state = view.state
    // Don't do anything if the document/selection didn't change
    if (lastState && lastState.doc.eq(state.doc) &&
      lastState.selection.eq(state.selection)) return

    // Hide the tooltip if the selection is empty
    if (state.selection.empty) {
      this.tooltip.style.display = "none"
      return
    }

    // Otherwise, reposition it and update its content
    this.tooltip.style.display = ""
    let { from, to } = state.selection
    // These are in screen coordinates
    //check this - tranform
    let start = view.coordsAtPos(from), end = view.coordsAtPos(to)
    // The box in which the tooltip is positioned, to use as base
    let box = this.tooltip.offsetParent!.getBoundingClientRect()
    // Find a center-ish x position from the selection endpoints (when
    // crossing lines, end may be more to the left)
    let left = Math.max((start.left + end.left) / 2, start.left + 3)
    this.tooltip.style.left = (left - box.left) + "px"
    let width = Math.abs(start.left - end.left) / 2;
    let mid = Math.min(start.left, end.left) + width;
    //THIS WIDTH IS 15 * NUMBER OF ICONS + 15
    this.tooltip.style.width = 120 + "px";
    this.tooltip.style.bottom = (box.bottom - start.top) + "px";
  }

  destroy() { this.tooltip.remove() }
}