import { h, Host } from "@stencil/core";
import { validateProp } from "../../helpers/Validate/props";
import { TooltipClass, TooltipContentClass, TooltipPosition, TooltipSize, TooltipColors, } from "./constants";
import { createID } from "../../utils/string.utils";
import { govHost } from "../../helpers/Dom/template";
import { documentNode } from "../../helpers/Dom/win";
import { tick } from "../../utils/stencil.utils";
export class GovTooltip {
    constructor() {
        this.tooltipContentId = undefined;
        this.tooltipId = undefined;
        /**
         * Style variation of the tooltip
         */
        this.color = TooltipColors.PRIMARY;
        /**
         * Tooltip’s size.
         */
        this.size = TooltipSize._M;
        /**
         * Tooltip display position
         */
        this.position = "right";
        /**
         * Information contained in the tooltip
         */
        this.message = undefined;
        /**
         * Trigger is just an icon
         */
        this.icon = undefined;
        this.persist = false;
        this.h = govHost(this.host);
        this.tooltipId = createID("GovTooltip");
        this.tooltipContentId = createID("GovContentTooltip");
    }
    validateColor(newValue) {
        validateProp(TooltipColors, newValue, TooltipClass.root);
    }
    validateSize(newValue) {
        validateProp(TooltipSize, newValue, TooltipClass.root);
    }
    validatePosition(newValue) {
        validateProp(TooltipPosition, newValue, TooltipClass.root);
    }
    rerenderMessage() {
        this.createContentWrapper();
    }
    connectedCallback() {
        this.createContentWrapper();
        this.registerListeners();
    }
    componentWillLoad() {
        this.validateColor(this.color);
        this.validateSize(this.size);
        this.validatePosition(this.position);
    }
    componentDidUpdate() {
        this.createContentWrapper();
    }
    disconnectedCallback() {
        this.removeContent();
    }
    createContentWrapper() {
        var _a;
        if (this.tooltipContent) {
            if (this.message) {
                this.tooltipContent.innerHTML = this.message;
            }
            else if (this.insideContent) {
                this.tooltipContent.innerHTML = this.insideContent.innerHTML;
            }
            return;
        }
        let content;
        if (this.insideContent) {
            content = this.insideContent;
        }
        else {
            content = documentNode().createElement(TooltipContentClass.root);
            content.innerHTML = this.message;
        }
        content.setAttribute("id", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId);
        content.setAttribute("parent-id", this.tooltipId);
        content.setAttribute("color", this.color);
        content.setAttribute("size", this.size);
        documentNode().body.appendChild(content);
    }
    get tooltipContent() {
        var _a;
        return documentNode().body.querySelector(`#${(_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId}`);
    }
    get insideContent() {
        return this.host.querySelector(TooltipContentClass.root);
    }
    registerListeners() {
        this.host.addEventListener("click", e => {
            e.preventDefault();
            this.persist = true;
            if (this.tooltipContent) {
                this.tooltipContent.setAttribute("persist", "true");
            }
            this.showTooltip();
        });
        this.host.addEventListener("mouseenter", e => {
            e.preventDefault();
            this.showTooltip();
        });
        this.host.addEventListener("mouseleave", e => {
            e.preventDefault();
            if (this.persist === false) {
                this.hideTooltip();
            }
        });
    }
    verifyPositionSpace() {
        const offset = 12;
        const windowWidth = window.innerWidth - (window.innerWidth - document.documentElement.clientWidth);
        const trigger = this.host.getBoundingClientRect();
        const trgWidth = this.host.offsetWidth;
        const trgHeight = this.host.offsetHeight;
        const contentWidth = this.tooltipContent.offsetWidth;
        const contentHeight = this.tooltipContent.offsetHeight;
        const triggerPos = {
            left: trigger.left + document.documentElement.scrollLeft,
            top: trigger.top + document.documentElement.scrollTop,
        };
        const isRightSpace = ((triggerPos.left + offset + trigger.width) + contentWidth) <= windowWidth;
        const isLeftSpace = triggerPos.left > contentWidth;
        // LEFT/RIGHT
        if (this.position === TooltipPosition.LEFT || this.position === TooltipPosition.RIGHT) {
            this.tooltipContent.style.top = (triggerPos.top - ((contentHeight - trgHeight) / 2)) + "px";
            if (isRightSpace === false && isLeftSpace === false) {
                this.position = TooltipPosition.TOP;
                this.tooltipContent.setAttribute("position", TooltipPosition.TOP);
            }
            if (isLeftSpace && isRightSpace === false && this.position === TooltipPosition.RIGHT) {
                this.position = TooltipPosition.LEFT;
            }
            if (isRightSpace && isLeftSpace === false && this.position === TooltipPosition.LEFT) {
                this.position = TooltipPosition.RIGHT;
            }
        }
        if (this.position === TooltipPosition.RIGHT) {
            this.tooltipContent.setAttribute("position", TooltipPosition.RIGHT);
            this.tooltipContent.style.left = (triggerPos.left + offset + trigger.width) + "px";
        }
        if (this.position === TooltipPosition.LEFT) {
            this.tooltipContent.setAttribute("position", TooltipPosition.LEFT);
            this.tooltipContent.style.left = (triggerPos.left - (contentWidth + offset)) + "px";
        }
        // LEFT/RIGHT FOR TOP/BOTTOM
        if (this.position === TooltipPosition.TOP || this.position === TooltipPosition.BOTTOM) {
            if (contentWidth > trgWidth) {
                let leftPosition = (triggerPos.left - ((contentWidth - trgWidth) / 2));
                const isNotLeftSpace = leftPosition < 0;
                const isNotRightSpace = (leftPosition + contentWidth) > windowWidth;
                if (isNotLeftSpace && isNotRightSpace) {
                    this.tooltipContent.style.width = "auto";
                    this.tooltipContent.style.left = offset + "px";
                    this.tooltipContent.style.right = offset + "px";
                }
                else {
                    if (isNotLeftSpace) {
                        leftPosition = offset;
                    }
                    if (isNotRightSpace) {
                        leftPosition = leftPosition - ((windowWidth - (leftPosition + contentWidth + offset)) * -1);
                    }
                    this.tooltipContent.style.left = leftPosition + "px";
                }
            }
            else {
                const leftPosition = (triggerPos.left + ((trgWidth - contentWidth) / 2));
                this.tooltipContent.style.left = leftPosition + "px";
            }
        }
        if (this.position === TooltipPosition.TOP) {
            this.tooltipContent.setAttribute("position", TooltipPosition.TOP);
            this.tooltipContent.style.top = (triggerPos.top - (contentHeight + offset)) + "px";
        }
        if (this.position === TooltipPosition.BOTTOM) {
            this.tooltipContent.setAttribute("position", TooltipPosition.BOTTOM);
            this.tooltipContent.style.top = (triggerPos.top + (trgHeight + offset)) + "px";
        }
        this.tooltipContent.style.opacity = '1';
    }
    showTooltip() {
        if (this.tooltipContent) {
            this.tooltipContent.style.opacity = '0';
            this.tooltipContent.hidden = false;
            this.tooltipContent.setAttribute("is-visible", "true");
            tick(() => {
                this.verifyPositionSpace();
            });
        }
    }
    hideTooltip() {
        if (this.tooltipContent) {
            this.tooltipContent.setAttribute("is-visible", "false");
            this.tooltipContent.setAttribute("persist", "false");
            this.tooltipContent.removeAttribute('style');
        }
    }
    removeContent() {
        const contentEl = document.getElementById(this.tooltipContentId);
        if (contentEl) {
            contentEl.remove();
        }
    }
    render() {
        var _a;
        return (h(Host, { key: 'f64ba7c26358426ead39dadbb17687a39a4fb876', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, h("span", { key: 'd51fc3b886df342fe8fbcaa9452be316658c24b2', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
                if (this.persist === false) {
                    this.hideTooltip();
                }
            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, h("slot", { key: '6687d0562b3e99ea0e44ec97dadc5a2e085ff0a8' }))));
    }
    /**
     * Showing the modal
     */
    async show() {
        this.showTooltip();
    }
    /**
     * Hiding the modal
     */
    async hide() {
        this.persist = false;
        this.hideTooltip();
    }
    static get is() { return "gov-tooltip"; }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "TooltipColorType",
                    "resolved": "\"neutral\" | \"primary\"",
                    "references": {
                        "TooltipColorType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-tooltip/constants.tsx::TooltipColorType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Style variation of the tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "TooltipColors.PRIMARY"
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "TooltipSizeType",
                    "resolved": "\"l\" | \"m\" | \"s\"",
                    "references": {
                        "TooltipSizeType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-tooltip/constants.tsx::TooltipSizeType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Tooltip\u2019s size."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "TooltipSize._M"
            },
            "position": {
                "type": "string",
                "attribute": "position",
                "mutable": true,
                "complexType": {
                    "original": "TooltipPositionType",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {
                        "TooltipPositionType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-tooltip/constants.tsx::TooltipPositionType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Tooltip display position"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"right\""
            },
            "message": {
                "type": "string",
                "attribute": "message",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Information contained in the tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "undefined"
            },
            "identifier": {
                "type": "string",
                "attribute": "identifier",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Custom tooltip identifier."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "icon": {
                "type": "boolean",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Trigger is just an icon"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "undefined"
            }
        };
    }
    static get states() {
        return {
            "persist": {}
        };
    }
    static get methods() {
        return {
            "show": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Showing the modal",
                    "tags": []
                }
            },
            "hide": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Hiding the modal",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "color",
                "methodName": "validateColor"
            }, {
                "propName": "size",
                "methodName": "validateSize"
            }, {
                "propName": "position",
                "methodName": "validatePosition"
            }, {
                "propName": "message",
                "methodName": "rerenderMessage"
            }];
    }
}
//# sourceMappingURL=gov-tooltip.js.map
