import { balFloatingUi } from "../floating-ui";
export class DropdownPopupUtil {
    constructor() {
        this.updatePanelPosition = (lib, referenceEl, floatingEl) => () => {
            lib
                .computePosition(referenceEl, floatingEl, {
                placement: 'bottom-start',
                middleware: [lib.flip(), lib.shift()],
            })
                .then(({ x, y }) => {
                Object.assign(floatingEl.style, {
                    left: `${x}px`,
                    top: `${y}px`,
                });
            });
        };
    }
    connectedCallback(component) {
        this.component = component;
    }
    toggleList() {
        if (!this.component.valueUtil.isDisabled()) {
            if (this.component.isExpanded) {
                this.collapseList();
            }
            else {
                this.expandList();
            }
        }
    }
    async expandList() {
        var _a;
        if (this.component.panelEl) {
            const lib = await balFloatingUi.load();
            this.component.panelCleanup = lib.autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(lib, this.component.el, this.component.panelEl));
        }
        this.component.isExpanded = true;
        await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusSelected());
    }
    collapseList() {
        var _a;
        this.component.isExpanded = false;
        (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.resetFocus();
        if (this.component.panelCleanup) {
            this.component.panelCleanup();
        }
    }
}
