import { r as registerInstance, c as createEvent, h, g as getElement } from './index-77a9c9e7.js';
import { z as zh } from './index.esm.min-cd800f97.js';

const bpSdkQuestionSetNavigationCss = ".bp-sdk-question-set-navigation__list-item-content{user-select:none}";
const BpSdkQuestionSetNavigationStyle0 = bpSdkQuestionSetNavigationCss;

const BpSdkQuestionSetNavigation = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.activeIdUpdate = createEvent(this, "activeIdUpdate", 7);
        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: zh('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;
    }
    get el() { return getElement(this); }
};
BpSdkQuestionSetNavigation.style = BpSdkQuestionSetNavigationStyle0;

export { BpSdkQuestionSetNavigation as bp_sdk_question_set_navigation };
