import { __decorate, __metadata } from "tslib";
import { h, Host, } from "@stencil/core";
import { BEM } from "../../utils/bem";
import { balBreakpoints, ListenToBreakpoints } from "../../utils/breakpoints";
import { ListenToConfig } from "../../utils/config";
import { isEnterKey, isSpaceKey } from "../../utils/keyboard";
import { BalScrollHandler } from "../../utils/scroll";
import { preventDefault } from "../bal-select/utils/utils";
export class Hint {
    constructor() {
        this.bodyScrollHandler = new BalScrollHandler();
        this.componentId = `bal-hint-${hintIds++}`;
        this.isActive = false;
        this.innerCloseLabel = 'Close';
        this.isMobile = balBreakpoints.isMobile;
        /**
         * Disables the close button for tablet and desktop
         */
        this.small = false;
        this.onPopupChange = (ev) => {
            this.isActive = ev.detail;
            if (this.isMobile) {
                if (this.isActive) {
                    this.bodyScrollHandler.disable();
                }
                else {
                    this.bodyScrollHandler.enable();
                }
            }
            preventDefault(ev);
        };
    }
    connectedCallback() {
        this.bodyScrollHandler.connect();
    }
    componentDidRender() {
        this.updateContent();
    }
    disconnectedCallback() {
        this.bodyScrollHandler.disconnect();
    }
    breakpointListener(breakpoints) {
        const isCurrentMobile = breakpoints.mobile;
        if (isCurrentMobile !== this.isMobile) {
            this.isActive = false;
        }
        this.isMobile = isCurrentMobile;
    }
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        if (!this.closeLabel) {
            switch (state.language) {
                case 'de':
                    this.innerCloseLabel = 'Schliessen';
                    break;
                case 'fr':
                    this.innerCloseLabel = 'Fermer';
                    break;
                case 'it':
                    this.innerCloseLabel = 'Chiudere';
                    break;
                case 'nl':
                    this.innerCloseLabel = 'Sluiten';
                    break;
                default:
                    this.innerCloseLabel = 'Close';
                    break;
            }
        }
    }
    /**
     * Toggles the hint box.
     */
    async toggle() {
        if (this.isActive) {
            this.dismiss();
        }
        else {
            this.present();
        }
    }
    /**
     * Opens the hint box.
     */
    async present() {
        if (this.popupElement) {
            this.popupElement.present();
        }
        this.isActive = true;
    }
    /**
     * Closes the hint box.
     */
    async dismiss() {
        if (this.popupElement) {
            this.popupElement.dismiss();
        }
        this.isActive = false;
    }
    updateContent() {
        if (this.hintContentEl && this.slotWrapperEl) {
            this.hintContentEl.innerHTML = this.slotWrapperEl.innerHTML;
        }
    }
    render() {
        const block = BEM.block('hint');
        const elIcon = block.element('icon');
        const elContent = block.element('content');
        const elButtons = elContent.element('buttons');
        const TriggerIcon = () => {
            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "bal-popup": this.componentId, "data-testid": "bal-hint-trigger", "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onKeyDown: event => {
                    if (isEnterKey(event) || isSpaceKey(event)) {
                        event.preventDefault();
                        this.toggle();
                    }
                } }));
        };
        const HintContent = () => {
            return (h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, h("div", { ref: el => (this.hintContentEl = el) }), h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
        };
        const Popup = () => {
            return (h("div", { class: Object.assign({}, block.element('popup').class()) }, h(TriggerIcon, null), h("bal-popup", { id: this.componentId, placement: "right", closable: true, ref: el => (this.popupElement = el), onBalChange: this.onPopupChange, variant: this.isMobile ? 'fullscreen' : 'popover', offset: this.isMobile ? 0 : 16 }, h("bal-popup-content", null, h(HintContent, null)))));
        };
        return (h(Host, { class: Object.assign({}, block.class()) }, h(Popup, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
    }
    static get is() { return "bal-hint"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-hint.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-hint.css"]
        };
    }
    static get properties() {
        return {
            "closeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Text for the close button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "close-label"
            },
            "small": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables the close button for tablet and desktop"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "small",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isActive": {},
            "innerCloseLabel": {},
            "isMobile": {}
        };
    }
    static get methods() {
        return {
            "configChanged": {
                "complexType": {
                    "signature": "(state: BalConfigState) => Promise<void>",
                    "parameters": [{
                            "name": "state",
                            "type": "BalConfigState",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalConfigState": {
                            "location": "import",
                            "path": "../../utils/config",
                            "id": "src/utils/config/index.ts::BalConfigState"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "define config for the component"
                        }]
                }
            },
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Toggles the hint box.",
                    "tags": []
                }
            },
            "present": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Opens the hint box.",
                    "tags": []
                }
            },
            "dismiss": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Closes the hint box.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "element"; }
}
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Hint.prototype, "breakpointListener", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Hint.prototype, "configChanged", null);
let hintIds = 0;
