import { buildClassList } from "@boldpenguin/sdk-utility";
import { h } from "@stencil/core";
export class BpSdkQuestionSetNavigation {
    constructor() {
        this.updateQuestionSetId = (id) => () => {
            if (this.isNavigationEnabled) {
                this.activeId = id;
                this.activeIdUpdate.emit(id);
            }
        };
        this.onKeyDown = (e) => {
            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
                e.preventDefault();
            }
        };
        this.onKeyUp = (e) => {
            var _a;
            const focused = this.el.querySelector(':focus').parentElement;
            const index = +((_a = focused.getAttribute('aria-posinset')) !== null && _a !== void 0 ? _a : -1);
            let target = this.getPosition(index, e.key);
            if (target != null) {
                const button = this.el.querySelector(`[aria-posinset='${target}'] > button`);
                button.focus();
            }
        };
        this.questionSets = [];
        this.isNavigationEnabled = true;
        this.activeId = undefined;
        this.useExternal = false;
    }
    resetState() { }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-question-set-navigation');
        customElements.whenDefined('bp-sdk-external-question-set-navigation').then(() => {
            this.useExternal = true;
        });
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-question-set-navigation", { activeId: this.activeId, isNavigationEnabled: this.isNavigationEnabled, questionSets: this.questionSets }));
    }
    test() { }
    renderInternal() {
        return (h("nav", { class: "bp-sdk-question-set-navigation__container", "aria-label": "Question Sets", role: "navigation", onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }, h("ul", { tabindex: "0", role: "list", class: "bp-sdk-question-set-navigation__list" }, this.questionSets
            .filter((item) => item.is_active && item.answers.length > 0)
            .map((set, i) => {
            var _a;
            return (h("li", { class: buildClassList('bp-sdk-question-set-navigation__list-item', {
                    'bp-sdk-question-set-navigation__list-item--active': set.question_set_id === this.activeId ||
                        ((_a = this.questionSets.find((i) => i.question_set_id === this.activeId)) === null || _a === void 0 ? void 0 : _a.parentQuestionSetId) === set.id,
                    'bp-sdk-question-set-navigation__list-item--completed': set.is_completed,
                    'bp-sdk-question-set-navigation__list-item--parent': set.isParent,
                    'bp-sdk-question-set-navigation__list-item--child': set.isChild,
                }), "aria-setsize": this.questionSets.length, "aria-posinset": i + 1 }, h("button", { type: "button", tabindex: "-1", class: "bp-sdk-question-set-navigation__list-item-button", disabled: !this.isNavigationEnabled, onClick: this.updateQuestionSetId(set.question_set_id) }, h("span", { class: "bp-sdk-question-set-navigation__list-item-content" }, set.question_set.name))));
        }))));
    }
    getPosition(index, key) {
        let target;
        if (key === 'ArrowUp') {
            if (index > 1 && index <= this.questionSets.length) {
                target = index - 1;
            }
            else {
                target = this.questionSets.length;
            }
        }
        else if (key === 'ArrowDown') {
            if (index > -1 && index < this.questionSets.length) {
                target = index + 1;
            }
            else {
                target = 1;
            }
        }
        return target;
    }
    static get is() { return "bp-sdk-question-set-navigation"; }
    static get originalStyleUrls() {
        return {
            "$": ["bp-sdk-question-set-navigation.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-question-set-navigation.css"]
        };
    }
    static get properties() {
        return {
            "questionSets": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "TQuestionSetNavigationItem[]",
                    "resolved": "TQuestionSetNavigationItem[]",
                    "references": {
                        "TQuestionSetNavigationItem": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::TQuestionSetNavigationItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Potential question sets"
                },
                "defaultValue": "[]"
            },
            "isNavigationEnabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Question set navigation enabled/disabled"
                },
                "attribute": "is-navigation-enabled",
                "reflect": false,
                "defaultValue": "true"
            },
            "activeId": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Active question set id"
                },
                "attribute": "active-id",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "useExternal": {}
        };
    }
    static get events() {
        return [{
                "method": "activeIdUpdate",
                "name": "activeIdUpdate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event to update active question set ID"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
