import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
import { computePosition, flip, offset, shift } from "@floating-ui/dom";
export class XDropdown {
    constructor() {
        this.show = false;
        this.align = 'bottom';
        this.hover = false;
        this.syncWidth = false;
        this.offset = 0;
    }
    /**
     * Update setting on align change
     */
    onAlignWatch() {
        this.updateDropdownContainer();
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        this.container = this.el.querySelector('.dropdown-container');
        this.updateDropdownContainer();
        this.el.addEventListener('mouseenter', this.onMouseEnterOnContainer.bind(this));
        this.el.addEventListener('mouseleave', this.onMouseLeaveOnContainer.bind(this));
    }
    /**
     * On component did destroyed hook
     */
    disconectedCallback() {
        if (this.el) {
            this.el.removeEventListener('mouseenter', this.onMouseEnterOnContainer);
            this.el.removeEventListener('mouseleave', this.onMouseLeaveOnContainer);
        }
    }
    /**
     * Event triggered on mouse enter hover container
     */
    onMouseEnterOnContainer() {
        if (this.hover) {
            this.show = true;
        }
    }
    /**
     * Event triggered on mouse leave hover container
     */
    onMouseLeaveOnContainer() {
        if (this.hover) {
            this.show = false;
        }
    }
    /**
     * Update the instance or create
     */
    updateDropdownContainer() {
        if (this.syncWidth) {
            this.container.style.maxWidth = `${this.el.offsetWidth}px`;
            this.container.style.width = '100%';
        }
        else {
            this.container.style.maxWidth = 'auto';
            this.container.style.width = 'auto';
        }
        setTimeout(() => {
            computePosition(this.el, this.container, {
                placement: this.align,
                middleware: [flip(), shift({ padding: 10 }), offset(this.offset)],
            }).then(({ x, y }) => {
                this.container.style.left = `${x}px`;
                this.container.style.top = `${y}px`;
            });
        }, 50);
    }
    /**
     * Show tooltip overlay
     */
    async display(show) {
        this.show = show;
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '5f8255008c184d7631ccb4cd9551b116b5de5d41' }, h("slot", { key: 'e1ba19bc029636a57da7cc39b996d6bb074577d6' }), h("div", { key: 'cf2519e2ac095151a8a32749dd1d3afd0feefb83', class: cls('dropdown-container', { 'dropdown-show': this.show, 'dropdown-hover': this.hover }) }, h("slot", { key: 'd272d43ac171bafd22fd83aba86bd693cbc87360', name: "dropdown" })));
    }
    static get is() { return "x-dropdown"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "show": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element show dropdown content"
                },
                "attribute": "show",
                "reflect": true,
                "defaultValue": "false"
            },
            "align": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Placement",
                    "resolved": "\"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": "@floating-ui/dom",
                            "id": "node_modules::Placement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Tooltip aligment to show over element"
                },
                "attribute": "align",
                "reflect": false,
                "defaultValue": "'bottom'"
            },
            "hover": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Show element on hover"
                },
                "attribute": "hover",
                "reflect": false,
                "defaultValue": "false"
            },
            "syncWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sync width of parent element to child"
                },
                "attribute": "sync-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "offset": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element offset distance in pixels"
                },
                "attribute": "offset",
                "reflect": false,
                "defaultValue": "0"
            }
        };
    }
    static get methods() {
        return {
            "display": {
                "complexType": {
                    "signature": "(show: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "show",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Show tooltip overlay",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "align",
                "methodName": "onAlignWatch"
            }, {
                "propName": "show",
                "methodName": "onAlignWatch"
            }];
    }
}
