import { h, } from "@stencil/core";
import { States } from "../../../utils/utils";
import disableScroll from "disable-scroll";
export class SwOptionsMenu {
  constructor() {
    this.optionsInputUpdate = ["Modifica", "Cancella"];
    this.optionInputCreate = ["Cancella"];
    this.menuIsOpen = false;
    this.menuOpened = false;
    this.context_menu_header = undefined;
    this.status = undefined;
    this.state = undefined;
  }
  //ngOnChange()
  switchMenuIsOpen(newValue) {
    this.menuIsOpen = newValue;
    if (this.menuIsOpen) {
      disableScroll.on();
    }
    else {
      disableScroll.off();
    }
  }
  handleClick(ev) {
    if (!ev.target.localName.includes("sw-options-menu")) {
      this.menuOpened = false;
    }
  }
  handleScroll() {
    if (this.menuIsOpen) {
      window.scrollTo(0, 0);
    }
  }
  componentShouldUpdate() {
    this.status = this.state;
  }
  onRowClicked(str) {
    if (str === "Modifica") {
      this.menuOpened = false;
      this.changeStatusEmitter.emit("edit");
    }
    else {
      this.changeStatusEmitter.emit("delete");
    }
  }
  showCoords(event) {
    const el = this.element.shadowRoot.getElementById("options-container");
    const left = event.clientX - 150;
    el.style.left = left.toString() + "px";
    el.style.top = event.clientY.toString() + "px";
  }
  render() {
    if (this.status === States.create) {
      return (h("div", { class: "options" }, h("svg", { onClick: (ev) => this.showCoords(ev), width: "4", height: "16", viewBox: "0 0 4 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z", fill: "#8C8C8C" })), h("div", { id: "options-container", class: { "options-container": true, hidden: !this.menuIsOpen } }, h("div", { class: "title-option" }, (this.context_menu_header =
        this.context_menu_header === undefined
          ? "Opzioni"
          : this.context_menu_header)), h("table", null, this.optionInputCreate.map((s) => (h("tr", { class: "options-label", onClick: () => this.onRowClicked(s) }, h("td", null, s))))))));
    }
    else if (this.status === States.view) {
      return (h("div", { class: "options" }, h("svg", { onClick: (ev) => this.showCoords(ev), width: "4", height: "16", viewBox: "0 0 4 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z", fill: "#8C8C8C" })), h("div", { id: "options-container", class: { "options-container": true, hidden: !this.menuIsOpen } }, h("div", { class: "title-option" }, (this.context_menu_header =
        this.context_menu_header === undefined
          ? "Opzioni"
          : this.context_menu_header)), h("table", { class: "table-view" }, this.optionsInputUpdate.map((s) => (h("tr", { class: "options-label", onClick: () => this.onRowClicked(s) }, h("td", null, s))))))));
    }
    else {
      return (h("div", { class: "options" }, h("svg", { onClick: (ev) => this.showCoords(ev), width: "4", height: "16", viewBox: "0 0 4 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z", fill: "#8C8C8C" })), h("div", { id: "options-container", class: { "options-container": true, hidden: !this.menuIsOpen } }, h("div", { class: "title-option" }, (this.context_menu_header =
        this.context_menu_header === undefined
          ? "Opzioni"
          : this.context_menu_header)), h("table", null, this.optionInputCreate.map((s) => (h("tr", { class: "options-label", onClick: () => this.onRowClicked(s) }, h("td", null, s))))))));
    }
  }
  static get is() { return "sw-options-menu"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["sw-options-menu.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["sw-options-menu.css"]
    };
  }
  static get properties() {
    return {
      "menuOpened": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "menu-opened",
        "reflect": false,
        "defaultValue": "false"
      },
      "context_menu_header": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "context_menu_header",
        "reflect": false
      },
      "state": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "States",
          "resolved": "States.create | States.edit | States.view",
          "references": {
            "States": {
              "location": "import",
              "path": "../../../utils/utils"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "state",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "menuIsOpen": {},
      "status": {}
    };
  }
  static get events() {
    return [{
        "method": "changeStatusEmitter",
        "name": "changeStatusEmitter",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "element"; }
  static get watchers() {
    return [{
        "propName": "menuOpened",
        "methodName": "switchMenuIsOpen"
      }];
  }
  static get listeners() {
    return [{
        "name": "click",
        "method": "handleClick",
        "target": "window",
        "capture": false,
        "passive": false
      }, {
        "name": "scroll",
        "method": "handleScroll",
        "target": "window",
        "capture": false,
        "passive": true
      }];
  }
}
