import { Component, Host, h, Prop, Event, Element } from '@stencil/core';
import { State } from '@stencil/core/internal';
export class UxplOptionsMenu {
  constructor() {
    this.active = false;
    this.activating = false;
    this.hasButtonSlot = false;
  }
  componentWillLoad() {
    const buttonSlot = this.hostElement.querySelector('[slot="button"]');
    this.hasButtonSlot = !!buttonSlot;
    if (buttonSlot) {
      buttonSlot.addEventListener('clicked', () => {
        this.toggleMenu();
      });
    }
  }
  toggleMenu() {
    if (!this.active) {
      this.activating = true;
    }
    else {
      this.active = false;
    }
  }
  handleOptionSelection(option) {
    this.active = false;
    this.selected.emit(option);
  }
  componentDidLoad() {
    // attach listener for click outside of pop-up
    document.addEventListener('click', (event) => {
      if (this.active == true) {
        if (event.target !== this.node) {
          this.toggleMenu();
          this.closed.emit();
        }
      }
      else {
        if (this.activating) {
          this.active = true;
          this.activating = false;
        }
      }
    });
  }
  render() {
    if (this.config) {
      return (h(Host, null,
        h("div", { class: "options", ref: (node) => this.node = node },
          h("div", { class: {
              "uxpl-options-picker": true,
              "is-active": this.active ? true : false,
              "above": this.yPosition && this.yPosition.toLowerCase() === 'above',
              "below": this.yPosition && this.yPosition.toLowerCase() === 'below',
              "before": this.xPosition && this.xPosition.toLowerCase() === 'before',
              "after": this.xPosition && this.xPosition.toLowerCase() === 'after',
            }, part: "options-picker", style: {
              "width": this.menuWidth ? this.menuWidth : 'auto',
              "max-height": this.menuHeight ? this.menuHeight : undefined,
              "white-space": this.menuWidth ? 'normal' : 'nowrap'
            } },
            h("ul", { class: "uxpl-options-menu" }, this.config.options && this.config.options.map((option) => h("li", { class: "uxpl-options-menu-item", onClick: () => this.handleOptionSelection(option) },
              option.iconName || option.iconUrl ? h("uxpl-icon", { icon: option.iconName, url: option.iconUrl, color: option.iconColor ? option.iconColor : (this.defaultColor ? this.defaultColor : undefined), size: "16px" }) : undefined,
              h("a", { class: "uxpl-options-menu-item-link" }, option.label))))),
          this.hasButtonSlot ?
            h("slot", { name: "button" })
            :
              h("div", { class: "options-icon", style: {
                  "width": this.iconHeight ? this.iconHeight : "24px",
                  "height": this.iconWidth ? this.iconWidth : "24px",
                  "background-size": ((this.iconHeight ? this.iconHeight : "24px") + " " + (this.iconWidth ? this.iconWidth : "24px"))
                }, onClick: () => this.toggleMenu() }))));
    }
    else {
      return (h("host", null));
    }
  }
  static get is() { return "uxpl-options-menu"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-options-menu.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-options-menu.css"]
  }; }
  static get assetsDirs() { return ["assets"]; }
  static get properties() { return {
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "OptionsMenuConfig",
        "resolved": "OptionsMenuConfig",
        "references": {
          "OptionsMenuConfig": {
            "location": "import",
            "path": "../../models/optionsMenuConfig"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "config"
      }
    },
    "xPosition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "xPosition (before/after)"
      },
      "attribute": "x-position",
      "reflect": false
    },
    "yPosition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "yPosition (above/below)"
      },
      "attribute": "y-position",
      "reflect": false
    },
    "iconHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "iconHeight (eg. 24px)"
      },
      "attribute": "icon-height",
      "reflect": false
    },
    "iconWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "iconWidth (eg. 24px)"
      },
      "attribute": "icon-width",
      "reflect": false
    },
    "menuWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "menu width (eg. 200px)"
      },
      "attribute": "menu-width",
      "reflect": false
    },
    "menuHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "menu max height (eg. 200px)"
      },
      "attribute": "menu-height",
      "reflect": false
    },
    "defaultColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "default icon color if not specified in model"
      },
      "attribute": "default-color",
      "reflect": false
    }
  }; }
  static get states() { return {
    "active": {}
  }; }
  static get events() { return [{
      "method": "selected",
      "name": "selected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Option selected"
      },
      "complexType": {
        "original": "MenuOption",
        "resolved": "MenuOption",
        "references": {
          "MenuOption": {
            "location": "import",
            "path": "../../models/optionsMenuConfig"
          }
        }
      }
    }, {
      "method": "closed",
      "name": "closed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Menu clicked off"
      },
      "complexType": {
        "original": "null",
        "resolved": "null",
        "references": {}
      }
    }]; }
  static get elementRef() { return "hostElement"; }
}
