import { __decorate } from "tslib";
import { query } from "lit/decorators.js";
import { randomString } from "../../lib/Random.js";
import UiList from "./UiList.js";
/**
 * The listbox is used for lists from which a user may select one or more items which are static and,
 * unlike HTML <select> elements, may contain images.
 *
 * Note, this will automatically set `role` to `option` and `aria-selected` to `false` on each child
 * that is a valid list item.
 *
 * TODO:
 * - define a checkbox item, space toggle a checkbox.
 */
export default class UiListbox extends UiList {
    connectedCallback() {
        super.connectedCallback();
        this.setAttribute('role', 'listbox');
    }
    updateItems() {
        super.updateItems();
        this.items.forEach(i => {
            if (!this.isListItem(i)) {
                return;
            }
            if (i.getAttribute('role') !== 'option') {
                i.setAttribute('role', 'option');
            }
            if (i.hasAttribute('aria-selected')) {
                i.setAttribute('aria-selected', 'false');
            }
        });
    }
    beforeActivation() {
        this.removeAttribute('aria-activedescendant');
        const active = this.ariaSelectedElement;
        if (active) {
            active.setAttribute('aria-selected', 'false');
        }
    }
    afterActivation(item) {
        if (!item) {
            return;
        }
        item.setAttribute('aria-selected', 'true');
        if (!item.id) {
            // eslint-disable-next-line no-param-reassign
            item.id = `option-${randomString(4)}`;
        }
        this.setAttribute('aria-activedescendant', item.id);
    }
    highlightItem(item) {
        this.beforeActivation();
        super.highlightItem(item);
        this.afterActivation(this.highlightListItem);
    }
    activateListItem(item) {
        this.beforeActivation();
        super.activateListItem(item);
        this.afterActivation(this.activeListItem);
    }
}
__decorate([
    query('[aria-selected=true]')
], UiListbox.prototype, "ariaSelectedElement", void 0);
//# sourceMappingURL=UiListbox.js.map