import { Host, h } from "@stencil/core";
import { createPopper } from "@popperjs/core";
import { cls } from "../../utils/helpers";
const popperDefaultConfig = {
    placement: 'auto',
    modifiers: [
        {
            name: 'offset',
            options: {
                offset: [0, 0],
            },
        },
    ],
};
export class XDropdown {
    constructor() {
        this.show = false;
        this.align = 'bottom';
        this.hover = false;
        this.syncWidth = false;
    }
    /**
     * Update popper setting on align change
     */
    onAlignWatch() {
        this.updatePopper();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        this.container = this.el.querySelector('.dropdown-container');
        this.updatePopper();
        this.el.addEventListener('mouseenter', () => {
            if (this.hover) {
                this.show = true;
            }
        });
        this.el.addEventListener('mouseleave', () => {
            if (this.hover) {
                this.show = false;
            }
        });
    }
    /**
     * On component did destroyed hook
     */
    disconectedCallback() {
        if (this.popper) {
            this.popper.destroy();
        }
    }
    /**
     * Update the popper instance or create
     */
    updatePopper() {
        this.popper = createPopper(this.el, this.container, Object.assign(Object.assign({}, popperDefaultConfig), { placement: this.align }));
        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';
        }
    }
    /**
     * Show tooltip overlay popper
     */
    async display(show) {
        this.show = show;
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'ecfd7bf191d9fe90c4157e6c05bb4074fb33fc57' }, h("slot", { key: '5a720b6b5f9dd78c76945dbbaa148dc19bf1e0fc' }), h("div", { key: 'b5205981b09d40a758f83354e82f815d74afa939', class: cls('dropdown-container', { 'dropdown-show': this.show, 'dropdown-hover': this.hover }) }, h("slot", { key: '6ab7f3925d9f4a2b6eadc999f7b23254282f2365', 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": "DropdownAlignType",
                    "resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {
                        "DropdownAlignType": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-dropdown/component.tsx",
                            "id": "src/components/x-dropdown/component.tsx::DropdownAlignType"
                        }
                    }
                },
                "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"
            }
        };
    }
    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 popper",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "align",
                "methodName": "onAlignWatch"
            }, {
                "propName": "show",
                "methodName": "onAlignWatch"
            }];
    }
}
