import { createPopper } from '@popperjs/core';
import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
export class Tooltip {
  constructor() {
    this.placement = 'right';
    this.isVisible = false;
  }
  componentWillLoad() {
    this.initPopper();
  }
  componentDidRender() {
    var _a;
    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
  }
  watchHandler(_newValue, _oldValue) {
    this.initPopper();
  }
  render() {
    return (h(Host, { class: {
        'border border-light rounded bg-white': true,
        'd-none': !this.isVisible,
        'd-block': this.isVisible
      }, ref: (el) => (this.tooltip = el) },
      h("slot", null)));
  }
  initPopper() {
    if (this.target === undefined)
      return;
    this.popperInstance = createPopper(this.target, this.tooltip, {
      placement: this.placement,
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 8]
          }
        },
        {
          name: 'flip',
          options: {
            fallbackPlacements: ['top', 'left', 'bottom']
          }
        }
      ]
    });
    const showEvents = ['mouseenter', 'focus'];
    const hideEvents = ['mouseleave', 'blur'];
    showEvents.forEach((event) => {
      var _a;
      (_a = this.target) === null || _a === void 0 ? void 0 : _a.addEventListener(event, () => (this.isVisible = true));
    });
    hideEvents.forEach((event) => {
      var _a;
      (_a = this.target) === null || _a === void 0 ? void 0 : _a.addEventListener(event, () => (this.isVisible = false));
    });
  }
  static get is() { return "ap-ben-tooltip"; }
  static get originalStyleUrls() { return {
    "$": ["tooltip.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["tooltip.css"]
  }; }
  static get properties() { return {
    "target": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "HTMLElement",
        "resolved": "HTMLElement | undefined",
        "references": {
          "HTMLElement": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "placement": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Placement",
        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
        "references": {
          "Placement": {
            "location": "import",
            "path": "@popperjs/core"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "placement",
      "reflect": false,
      "defaultValue": "'right'"
    }
  }; }
  static get states() { return {
    "isVisible": {}
  }; }
  static get watchers() { return [{
      "propName": "target",
      "methodName": "watchHandler"
    }]; }
}
