import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useId, useRef } from "react";
import cx from "classnames";
import { FormattedMessage, defineMessages, useIntl } from "react-intl";
import { UiButton, UiDropdown, UiIcon, UiIconButton, UiListbox, UiSkeleton, UiTooltip, } from "@gooddata/sdk-ui-kit";
import { KeyDriverItem } from "../components/items/KeyDriverItem.js";
import { TrendItem } from "../components/items/TrendItem.js";
import { useSignificantDrives } from "../hooks/useDriversList.js";
import { useKdaState } from "../providers/KdaState.js";
const trendMessages = defineMessages({
    up: { id: "kdaDialog.dialog.keyDrives.button.trendUp" },
    down: { id: "kdaDialog.dialog.keyDrives.button.trendDown" },
    all: { id: "kdaDialog.dialog.keyDrives.button.trendAll" },
});
export function KeyDriversPanel({ loading, detailsId }) {
    const intl = useIntl();
    const listTitleId = useId();
    const listId = useId();
    const trendOpener = useRef(null);
    const label = intl.formatMessage({ id: "kdaDialog.dialog.keyDrives.title" });
    const tooltip = intl.formatMessage({ id: "kdaDialog.dialog.keyDrives.tooltip" });
    const { state, setState } = useKdaState();
    const { maximum, list, trends, trendUp, trendDown } = useSignificantDrives();
    const upSelected = state.selectedTrend === "up";
    const allSelected = state.selectedTrend === "all";
    const countSelected = allSelected
        ? trendUp.length + trendDown.length
        : upSelected
            ? trendUp.length
            : trendDown.length;
    return (_jsxs("div", { className: cx("gd-kda-key-drivers-panel"), children: [
            _jsx("div", { className: cx("gd-kda-key-drivers-panel-title"), id: listTitleId, children: loading ? (_jsx(UiSkeleton, { itemHeight: 21, itemWidth: 70 })) : (_jsxs(_Fragment, { children: [label, _jsx(UiTooltip, { arrowPlacement: "left", triggerBy: ["hover", "focus"], optimalPlacement: true, content: tooltip, anchor: _jsx(UiIconButton, { icon: "question", variant: "tertiary", size: "xsmall", accessibilityConfig: {
                                    ariaLabel: label,
                                } }) })
                    ] })) }), _jsx("div", { className: cx("gd-kda-key-drivers-panel-trend"), children: loading ? (_jsx(UiSkeleton, { itemHeight: 27 })) : (_jsx(UiDropdown, { closeOnEscape: true, autofocusOnOpen: true, closeOnOutsideClick: true, onOpen: () => {
                        setState({
                            trendDropdownOpen: true,
                        });
                    }, onClose: () => {
                        setTimeout(() => {
                            setState({
                                trendDropdownOpen: false,
                            });
                        }, 10);
                    }, renderButton: (props) => (_jsx(UiButton, { ref: trendOpener, size: "medium", label: intl.formatMessage(trendMessages[state.selectedTrend || "all"]), iconAfter: props.isOpen ? "chevronUp" : "chevronDown", badgeAfter: intl.formatMessage({ id: "kdaDialog.dialog.keyDrives.drivers" }, { count: countSelected }), iconAfterSize: 11, onClick: props.toggleDropdown })), renderBody: (props) => (_jsx(UiListbox, { width: trendOpener.current?.offsetWidth ?? 200, items: trends, ariaAttributes: {
                            id: props.ariaAttributes.id,
                            "aria-controls": detailsId,
                            "aria-labelledby": listTitleId,
                        }, InteractiveItemComponent: (props) => {
                            return _jsx(TrendItem, { ...props });
                        }, selectedItemId: getSelectedTrend(state), onSelect: (item) => {
                            setState({ selectedTrend: item.data.trend });
                            props.closeDropdown();
                        } })) })) }), _jsx("div", { className: cx("gd-kda-key-drivers-panel-list", {
                    empty: list.length === 0,
                }), children: loading ? (_jsxs("div", { className: cx("gd-kda-key-drivers-panel-list-loading"), children: [
                        _jsx(UiSkeleton, { itemHeight: 40 }), _jsx(UiSkeleton, { itemHeight: 40 }), _jsx(UiSkeleton, { itemHeight: 40 }), _jsx(UiSkeleton, { itemHeight: 40 }), _jsx(UiSkeleton, { itemHeight: 40 }), _jsx(UiSkeleton, { itemHeight: 40 })
                    ] })) : (_jsx(_Fragment, { children: list.length > 0 ? (_jsx(UiListbox, { items: list, ariaAttributes: {
                            id: listId,
                            "aria-controls": detailsId,
                            "aria-labelledby": listTitleId,
                        }, InteractiveItemComponent: (props) => {
                            return _jsx(KeyDriverItem, { ...props, maximum: maximum });
                        }, selectedItemId: getSelectedItem(state), onSelect: (item) => {
                            setState({ selectedItem: item });
                        } })) : (_jsxs("div", { className: cx("gd-kda-key-drivers-panel-list-empty"), children: [
                            _jsx(UiIcon, { type: "drawerEmpty", size: 26, color: "currentColor" }), _jsx(FormattedMessage, { id: "kdaDialog.dialog.keyDrives.empty" })
                        ] })) })) })
        ] }));
}
function getSelectedItem(state) {
    return typeof state.selectedItem === "string" ? undefined : state.selectedItem.id;
}
function getSelectedTrend(state) {
    return state.selectedTrend;
}
//# sourceMappingURL=KeyDriversPanel.js.map