import { __decorate, __metadata } from "tslib";
import { h, Host } from "@stencil/core";
import { ariaBooleanToString } from "../../../utils/aria";
import { BEM } from "../../../utils/bem";
import { defaultConfig, ListenToConfig } from "../../../utils/config";
import { stopEventBubbling } from "../../../utils/form-input";
import { Logger } from "../../../utils/log";
import { i18nBalAccordion } from "../bal-accordion.i18n";
export class AccordionTrigger {
    constructor() {
        this.componentId = `bal-accordion-trigger-${accordionTriggerIds++}`;
        this.language = defaultConfig.language;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * @deprecated
         * Trigger will be a bal-button
         */
        this.button = false;
        /**
         * If `true` the button is aligned over the whole width
         */
        this.expanded = true;
        /**
         * Label of the open trigger button
         */
        this.openLabel = '';
        /**
         * BalIcon of the open trigger button
         */
        this.openIcon = 'caret-down';
        /**
         * Label of the close trigger button
         */
        this.closeLabel = '';
        /**
         * BalIcon of the close trigger button
         */
        this.closeIcon = '';
        /**
         * The color to use from your application's color palette.
         */
        this.color = 'info';
        /**
         * Size of the button
         */
        this.size = '';
        /**
         * @internal
         */
        this.active = false;
        /**
         * @internal
         */
        this.state = 1 /* AccordionState.Collapsed */;
        /**
         * PRIVATE METHODS
         * ------------------------------------------------------
         */
        this.updateAccordionId = () => { var _a; return (this.parentAccordionId = (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.id); };
        /**
         * EVENT HANDLER
         * ------------------------------------------------------
         */
        this.onClick = (ev) => {
            var _a;
            stopEventBubbling(ev);
            (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
        };
        /**
         * RENDER
         * ------------------------------------------------------
         */
        this.block = BEM.block('accordion').element('trigger');
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.updateAccordionId();
    }
    componentWillRender() {
        this.updateAccordionId();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    get realVariant() {
        if (this.button) {
            return 'button';
        }
        return this.variant;
    }
    get parentAccordionElement() {
        var _a;
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion')) || null;
    }
    get parentAccordionSummaryElement() {
        var _a;
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion-summary')) || null;
    }
    render() {
        const id = this.parentAccordionId ? `${this.parentAccordionId}-trigger` : this.componentId;
        const label = this.active ? this.closeLabel : this.openLabel;
        let turn = false;
        let icon = this.active ? this.closeIcon : this.openIcon;
        if (this.closeIcon === '' || this.closeIcon === undefined || this.closeIcon === null) {
            turn = this.active;
            icon = this.openIcon || 'caret-down';
        }
        const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
        const buttonPart = expanded ? 'button expanded' : 'button';
        const parentSummaryEl = this.parentAccordionSummaryElement;
        let triggerAttributes = {
            tabindex: -1,
        };
        if (parentSummaryEl && !parentSummaryEl.trigger) {
            triggerAttributes = {
                tabindex: 0,
            };
        }
        const Trigger = (props) => {
            switch (props.variant) {
                case 'button':
                    return this.renderButton(props);
                case 'text':
                    return this.renderText(props);
                default:
                    return this.renderIcon(props);
            }
        };
        return (h(Host, { id: id, class: Object.assign({}, this.block.class()) }, h(Trigger, { variant: this.realVariant, id,
            label,
            icon,
            turn,
            expanded,
            buttonPart,
            triggerAttributes })));
    }
    renderButton({ id, buttonPart, icon, turn, label }) {
        return (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: this.expanded, icon: icon, iconTurn: turn, color: this.color, size: this.size, title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-expanded": ariaBooleanToString(this.active), onClick: this.onClick }, label));
    }
    renderIcon({ buttonPart, triggerAttributes, turn, icon, id }) {
        return (h("button", Object.assign({ class: Object.assign(Object.assign({}, this.block.element('button').class()), { 'bal-focused': triggerAttributes.tabindex === 0 }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })));
    }
    renderText({ buttonPart, triggerAttributes, turn, icon, id }) {
        const openLabel = this.openLabel || i18nBalAccordion[this.language].open;
        const closeLabel = this.closeLabel || i18nBalAccordion[this.language].close;
        return (h("button", Object.assign({ class: Object.assign(Object.assign({}, this.block.element('text').class()), { 'bal-focused': triggerAttributes.tabindex === 0 }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), this.active ? closeLabel : openLabel));
    }
    static get is() { return "bal-accordion-trigger"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-accordion-trigger.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-accordion-trigger.css"]
        };
    }
    static get properties() {
        return {
            "button": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Trigger will be a bal-button"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button",
                "defaultValue": "false"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalAccordionTriggerVariant",
                    "resolved": "\"button\" | \"icon\" | \"text\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the nature of the accordion trigger."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant"
            },
            "expanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the button is aligned over the whole width"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expanded",
                "defaultValue": "true"
            },
            "openLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label of the open trigger button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "open-label",
                "defaultValue": "''"
            },
            "openIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "BalIcon of the open trigger button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "open-icon",
                "defaultValue": "'caret-down'"
            },
            "closeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label of the close trigger button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "close-label",
                "defaultValue": "''"
            },
            "closeIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "BalIcon of the close trigger button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "close-icon",
                "defaultValue": "''"
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalButtonColor",
                    "resolved": "\"danger\" | \"info\" | \"info-light\" | \"light\" | \"link\" | \"primary\" | \"primary-light\" | \"secondary\" | \"success\" | \"tertiary\" | \"tertiary-green\" | \"tertiary-purple\" | \"tertiary-red\" | \"tertiary-yellow\" | \"text\" | \"warning\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The color to use from your application's color palette."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color",
                "defaultValue": "'info'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalButtonSize",
                    "resolved": "\"\" | \"small\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of the button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "''"
            },
            "active": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "active",
                "defaultValue": "false"
            },
            "state": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "AccordionState",
                    "resolved": "AccordionState.Collapsed | AccordionState.Collapsing | AccordionState.Expanded | AccordionState.Expanding",
                    "references": {
                        "AccordionState": {
                            "location": "import",
                            "path": "../../../interfaces",
                            "id": "src/interfaces.d.ts::AccordionState"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "state",
                "defaultValue": "AccordionState.Collapsed"
            }
        };
    }
    static get states() {
        return {
            "parentAccordionId": {},
            "language": {}
        };
    }
    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"
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
__decorate([
    Logger('bal-accordion-trigger'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], AccordionTrigger.prototype, "createLogger", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], AccordionTrigger.prototype, "configChanged", null);
let accordionTriggerIds = 0;
