import { LoadingIndicator } from './../resources/elements/loading-indicator';
import { UIMenu } from './../ui/menu/ui-menu';
import { Subscription } from 'aurelia-event-aggregator';
import { autoinject, bindable, Container, createOverrideContext, customAttribute, ViewSlot } from "aurelia-framework";
import { Config } from "../config";
import { UIInternal } from "../utils/ui-internal";

/*** Global tooltip container ***/
// let ContextmenuEl
// : HTMLDivElement & { tether?: UITether.Tether };

/*** Id seed ***/
let seed = 0;

@autoinject()
@customAttribute("ui-contextmenu")
export class UIContextmenu {
  //<ui-menu menu-items.bind="test" ref="context"></ui-menu>

  @bindable
  public menuItems;
  /**
   * Tooltip theme
   * `ui-tooltip.bind="{theme:''; value:''}`
   */
  @bindable()
  public theme = "";

  /**
   * Tooltip position
   * @unused
   * @values "left" | "right" | "top" | "bottom"
   * `ui-tooltip.bind="{theme:''; value:''}`
   */


  /*** Start private props ***/
  private id = `tooltip-${seed++}`;



  private contextMenu: HTMLElement;
  private clickSubscription: Subscription;

  /*** End private props ***/
  // insert(containerElement, html, viewModel) {
  //   let viewFactory = this.viewCompiler.compile(html);
  //   let view = viewFactory.create(this.container);
  //   let anchorIsContainer = true;
  //   let viewSlot = new ViewSlot(containerElement, anchorIsContainer);
  //   viewSlot.add(view);
  //   view.bind(viewModel, createOverrideContext(viewModel));
  //   return () => {
  //     viewSlot.remove(view);
  //     view.unbind();
  //   };
  // }

  constructor(protected element: Element, private viewSlot: ViewSlot) {
    this.clickSubscription = UIInternal.subscribe(UIInternal.EVT_VIEWPORT_CLICK, () => {
      $(this.contextMenu).remove();
    });
  }
  protected attached() {
    /*** Attach event listeners ***/
    this.element.addEventListener("contextmenu", (mouseEvent: MouseEvent) => this.handleKeypressed(mouseEvent));

  }
  protected createContextMenu(): void {
    /*** Find parent element ***/
    // if (this.element.nodeType === Node.ELEMENT_NODE) {
    //   this.parentEl = this.element;
    // }
    // if (this.element.nodeType === Node.COMMENT_NODE) {
    //   this.parentEl = this.element.previousElementSibling;
    // }
    let view = UIInternal.compileTemplate("<template><ui-menu class=\"ui-contextmenu ui-shadow\" ui-bg=\"white\" ref=\"contextMenu\" menu-items.bind=\"menuItems\"></ui-menu></template>", this, createOverrideContext(this));

    const container = Container.instance.get(Config).containerConfig.FloatingContainer;
    let slot = new ViewSlot(container, true);
    slot.add(view);
    view.attached();
    //this.hideContextMenu();

    this.contextMenu.addEventListener("click", (ev) => this.handleClick(ev));

    /*** Create tooltip container ***/
    // this.menuEl.tether = UITether.tether(this.parentEl, this.menuEl, {
    //   anchorPosition: "tc",
    //   attachToViewport: true,
    //   position: "bc",
    //   resize: false
    // });


  }

  protected detached(): void {
    /*** Hide tooltip ***/
    //this.hide();
    /*** Detach event listeners ***/
    this.element.removeEventListener("contextmenu", (mouseEvent: MouseEvent) => this.handleKeypressed(mouseEvent));
    this.element.removeEventListener("click", (ev: MouseEvent) => this.handleClick(ev));
    this.clickSubscription.dispose();
  }
  hideContextMenu() {
    $(this.contextMenu).remove();
  }
  handleClick(ev: MouseEvent) {
    this.hideContextMenu();
  }
  handleKeypressed(ev: MouseEvent) {
    this.createContextMenu();
    this.contextMenu.style.position = "fixed";
    let maxWidth = document.body.clientWidth - this.contextMenu.clientWidth;
    let maxHeight = document.body.clientHeight - this.contextMenu.clientHeight;
    this.contextMenu.style.left = (ev.clientX > maxWidth ? maxWidth : ev.clientX) + 'px';
    this.contextMenu.style.top = (ev.clientY > maxHeight ? maxHeight : ev.clientY) + 'px';
    $(this.contextMenu).show();
    ev.preventDefault();
  }

}