import { h } from "@stencil/core";
import { createPopper } from "@popperjs/core";
export class CustomPopper {
    constructor() {
        this.placement = 'bottom';
        this.offset = [0, 10];
        this.strategy = 'absolute';
        this.trigger = 'click';
        this.isOpen = false;
        this.initialized = false;
        this.boundHandlers = {
            show: null,
            hide: null,
            handleClick: null,
        };
    }
    onAnchorRefChange(newValue) {
        if (newValue && this.popperContentRef && !this.initialized) {
            this.initPopper();
        }
    }
    componentDidLoad() {
        if (this.anchorRef && this.popperContentRef) {
            this.initPopper();
        }
    }
    initPopper() {
        if (this.initialized)
            return;
        this.initialized = true;
        // Store bound references
        this.boundHandlers.show = this.show.bind(this);
        this.boundHandlers.hide = this.hide.bind(this);
        this.boundHandlers.handleClick = this.handleClick.bind(this);
        this.popperInstance = createPopper(this.anchorRef, this.popperContentRef, this.popperOptions);
        if (this.trigger === 'click') {
            window.addEventListener('click', this.boundHandlers.handleClick);
        }
        else if (this.trigger === 'hover') {
            this.anchorRef.addEventListener('mouseenter', this.boundHandlers.show);
            this.anchorRef.addEventListener('mouseleave', this.boundHandlers.hide);
            this.popperContentRef.addEventListener('mouseenter', this.boundHandlers.show);
            this.popperContentRef.addEventListener('mouseleave', this.boundHandlers.hide);
        }
        else if (this.trigger === 'focus') {
            this.anchorRef.addEventListener('focus', this.boundHandlers.show);
            this.anchorRef.addEventListener('blur', this.boundHandlers.hide);
        }
    }
    disconnectedCallback() {
        var _a, _b, _c, _d, _e, _f, _g;
        if (!this.initialized)
            return;
        // Clean up popper instance
        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
        if (this.trigger === 'click') {
            window.removeEventListener('click', this.boundHandlers.handleClick);
        }
        else if (this.trigger === 'hover') {
            (_b = this.anchorRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.boundHandlers.show);
            (_c = this.anchorRef) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.boundHandlers.hide);
            (_d = this.popperContentRef) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.boundHandlers.show);
            (_e = this.popperContentRef) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.boundHandlers.hide);
        }
        else if (this.trigger === 'focus') {
            (_f = this.anchorRef) === null || _f === void 0 ? void 0 : _f.removeEventListener('focus', this.boundHandlers.show);
            (_g = this.anchorRef) === null || _g === void 0 ? void 0 : _g.removeEventListener('blur', this.boundHandlers.hide);
        }
    }
    handleClick(event) {
        const path = event.composedPath();
        const isAnchorClicked = path.includes(this.anchorRef);
        const isPopperContentClicked = path.includes(this.popperContentRef);
        if (!this.isOpen && isAnchorClicked) {
            this.show();
        }
        else if (this.isOpen && !isPopperContentClicked) {
            this.hide();
        }
        else if (this.isOpen && isAnchorClicked) {
            this.hide();
        }
    }
    get popperOptions() {
        return {
            placement: this.placement,
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: this.offset,
                    },
                },
            ],
            strategy: this.strategy,
        };
    }
    show() {
        this.isOpen = true;
        this.popperContentRef.setAttribute('data-show', '');
        this.popperInstance.update();
        this.showEvent.emit();
    }
    hide() {
        this.isOpen = false;
        this.popperContentRef.removeAttribute('data-show');
        this.popperInstance.update();
        this.hideEvent.emit();
    }
    render() {
        return (h("div", { key: 'dd78d45fac5784e4e35b567edd830849d7a6e7e6' }, h("style", { key: '9eb0b20522bf597e5220c0ccd83e0ee7bd8e5b3e' }, `
          .popper-content {
            display: none;
          }
          .popper-content[data-show] {
            display: block;
            z-index: 1030;
          }
          `), h("div", { key: 'de0afbe656eacf34ed147beeeb8d5485b8e1c187', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'ebb302495c71a1e5f1fd5236ce75495b5d4bc3b3' }))));
    }
    static get is() { return "custom-popper"; }
    static get properties() {
        return {
            "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",
                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placement",
                "defaultValue": "'bottom'"
            },
            "offset": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "[number, number]",
                    "resolved": "[number, number]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[0, 10]"
            },
            "strategy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PositioningStrategy",
                    "resolved": "\"absolute\" | \"fixed\"",
                    "references": {
                        "PositioningStrategy": {
                            "location": "import",
                            "path": "@popperjs/core",
                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::PositioningStrategy"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "strategy",
                "defaultValue": "'absolute'"
            },
            "trigger": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "trigger",
                "defaultValue": "'click'"
            },
            "anchorRef": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "HTMLElement | SVGElement",
                    "resolved": "HTMLElement | SVGElement",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        },
                        "SVGElement": {
                            "location": "global",
                            "id": "global::SVGElement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "showEvent",
                "name": "showEvent",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "hideEvent",
                "name": "hideEvent",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "anchorRef",
                "methodName": "onAnchorRefChange"
            }];
    }
}
