import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { S as States } from './utils.js';

var __assign = (undefined && undefined.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var canUseDOM = function () {
    return typeof window !== 'undefined' && !!window.document && !!window.document.createElement;
};
var DisableScroll = /** @class */ (function () {
    function DisableScroll() {
        var _this = this;
        this.handleWheel = function (e) {
            e.preventDefault();
        };
        this.handleScroll = function () {
            window.scrollTo.apply(window, _this.lockToScrollPos);
        };
        this.handleKeydown = function (e) {
            var keys = _this.options.keyboardKeys;
            /* istanbul ignore else */
            if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) {
                keys = keys.filter(function (key) { return !_this.options.authorizedInInputs.includes(key); });
            }
            /* istanbul ignore else */
            if (keys.includes(e.keyCode)) {
                e.preventDefault();
            }
        };
        this.element = null;
        this.lockToScrollPos = [0, 0];
        this.options = {
            authorizedInInputs: [32, 37, 38, 39, 40],
            disableKeys: true,
            disableScroll: true,
            disableWheel: true,
            keyboardKeys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
        };
        /* istanbul ignore else */
        if (canUseDOM()) {
            this.element = document.scrollingElement;
        }
    }
    /**
     * Disable Page Scroll
     */
    DisableScroll.prototype.on = function (element, options) {
        var _a, _b, _c, _d;
        if (!canUseDOM())
            return;
        this.element = element || this.element;
        this.options = __assign(__assign({}, this.options), options);
        var _e = this.options, disableKeys = _e.disableKeys, disableScroll = _e.disableScroll, disableWheel = _e.disableWheel;
        /* istanbul ignore else */
        if (disableWheel) {
            document.addEventListener('wheel', this.handleWheel, { passive: false });
            document.addEventListener('touchmove', this.handleWheel, { passive: false });
        }
        /* istanbul ignore else */
        if (disableScroll) {
            this.lockToScrollPos = [(_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0, (_d = (_c = this.element) === null || _c === void 0 ? void 0 : _c.scrollTop) !== null && _d !== void 0 ? _d : 0];
            document.addEventListener('scroll', this.handleScroll, { passive: false });
        }
        /* istanbul ignore else */
        if (disableKeys) {
            document.addEventListener('keydown', this.handleKeydown, { passive: false });
        }
    };
    /**
     * Re-enable page scrolls
     */
    DisableScroll.prototype.off = function () {
        if (!canUseDOM())
            return;
        document.removeEventListener('wheel', this.handleWheel);
        document.removeEventListener('touchmove', this.handleWheel);
        document.removeEventListener('scroll', this.handleScroll);
        document.removeEventListener('keydown', this.handleKeydown);
    };
    return DisableScroll;
}());
const disableScroll = new DisableScroll();

const swOptionsMenuCss = ":host{display:inline-flex;position:relative}.options-container{z-index:2;position:fixed;display:flex;flex-direction:column;width:150px;height:200px;background-color:white;border-radius:10px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.15);margin-top:1rem;pointer-events:none}.hidden{display:none}.options{cursor:pointer;padding-right:15px;padding-left:15px;display:flex;align-items:center}.title-option{border-radius:10px 10px 0 0;padding:20px;font-size:16px;color:#4c4c4c;font-weight:bold;align-items:center;min-height:20px;background-color:white;box-shadow:0 1px 3px rgba(0, 0, 0, 0.15)}.options-label{font-size:14px;color:#4c4c4c;font-weight:bold;cursor:pointer;height:auto;padding-left:20px}tr:hover{background-color:#f0f3f9}table{cursor:pointer;pointer-events:auto;background-color:#f7f9fc;height:auto;min-height:50px;margin-bottom:30px}.table-view{cursor:pointer;pointer-events:auto;background-color:#f7f9fc;height:auto;min-height:90px;margin-bottom:30px}tr{margin-bottom:20px}td{padding-left:10px}";

const SwOptionsMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.changeStatusEmitter = createEvent(this, "changeStatusEmitter", 7);
    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))))))));
    }
  }
  get element() { return this; }
  static get watchers() { return {
    "menuOpened": ["switchMenuIsOpen"]
  }; }
  static get style() { return swOptionsMenuCss; }
}, [1, "sw-options-menu", {
    "menuOpened": [1028, "menu-opened"],
    "context_menu_header": [1025],
    "state": [1],
    "menuIsOpen": [32],
    "status": [32]
  }, [[8, "click", "handleClick"], [9, "scroll", "handleScroll"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sw-options-menu"];
  components.forEach(tagName => { switch (tagName) {
    case "sw-options-menu":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SwOptionsMenu);
      }
      break;
  } });
}
defineCustomElement();

export { SwOptionsMenu as S, defineCustomElement as d };
