import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useMemo } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { UiBreadcrumb, UiIcon, UiSkeleton, } from "@gooddata/sdk-ui-kit";
import { KdaKeyDriverChart } from "../components/KdaKeyDriverChart.js";
import { KdaSummaryDrivers } from "../components/KdaSummaryDrivers.js";
import { KdaSummaryHeadline } from "../components/KdaSummaryHeadline.js";
import { useKdaState } from "../providers/KdaState.js";
import { useDataViewWithConfig } from "./hooks/useDataViewWithConfig.js";
import { useGroupAndItem } from "./hooks/useGroupAndItem.js";
export function KeyDriversOverview({ loading, detailsId }) {
    const { state } = useKdaState();
    if (state.selectedItem === "summary" || loading) {
        return _jsx(KeyDriversSummary, { loading: loading, detailsId: detailsId });
    }
    return _jsx(KeyDriversDetail, { detailsId: detailsId });
}
function KeyDriversSummary({ loading, detailsId }) {
    const intl = useIntl();
    const { state } = useKdaState();
    const summaryLoading = getSummaryLoading(state, loading);
    return (_jsxs("div", { className: cx("gd-kda-key-drivers-overview"), id: detailsId, children: [
            _jsx("div", { className: cx("gd-kda-key-drivers-overview-title"), children: summaryLoading ? (_jsx(UiSkeleton, { itemWidth: 200, itemHeight: 26 })) : (intl.formatMessage({ id: "kdaDialog.dialog.keyDrives.overview.summary.title" })) }), _jsx("div", { className: cx("gd-kda-key-drivers-overview-headline"), children: summaryLoading ? _jsx(UiSkeleton, { itemWidth: 420, itemHeight: 20 }) : _jsx(KdaSummaryHeadline, {}) }), _jsx("div", { className: cx("gd-kda-key-drivers-overview-drivers"), children: loading ? _jsx(UiSkeleton, { itemWidth: 618, itemHeight: 370 }) : _jsx(KdaSummaryDrivers, {}) })
        ] }));
}
function KeyDriversDetail({ detailsId }) {
    const intl = useIntl();
    const { state, setState } = useKdaState();
    const metric = state.definition?.metric;
    const title = metric?.measure.title ?? metric?.measure.alias ?? "";
    const category = getCategory(state.selectedItem);
    const { group, item } = useGroupAndItem();
    const { config, dataView, displayForm } = useDataViewWithConfig(group, item);
    const breadcrumbs = useMemo(() => [
        {
            id: "summary",
            label: intl.formatMessage({ id: "kdaDialog.dialog.keyDrives.overview.summary.home" }),
            tooltip: intl.formatMessage({
                id: "kdaDialog.dialog.keyDrives.overview.summary.home.tooltip",
            }),
        },
        {
            id: category,
            label: `${getAttribute(state.selectedItem)}: ${category}`,
        },
    ], [category, intl, state.selectedItem]);
    return (_jsxs("div", { className: cx("gd-kda-key-drivers-detail"), id: detailsId, children: [
            _jsxs("div", { className: cx("gd-kda-key-drivers-detail-head"), children: [
                    _jsx("div", { className: cx("gd-kda-key-drivers-detail-breadcrumb"), children: _jsx(UiBreadcrumb, { label: intl.formatMessage({
                                id: "kdaDialog.dialog.keyDrives.overview.summary.breadcrumb.label",
                            }), items: breadcrumbs, onSelect: (item) => {
                                if (item.id === "summary") {
                                    setState({ selectedItem: "summary" });
                                }
                            } }) }), _jsx("div", { className: cx("gd-kda-key-drivers-detail-title"), children: getTitle(intl, title, state.selectedItem) })
                ] }), _jsx("div", { className: cx("gd-kda-key-drivers-detail-visualisation"), children: _jsx(KdaKeyDriverChart, { config: config, dataView: dataView, displayForm: displayForm }) }), _jsxs("div", { className: cx("gd-kda-key-drivers-detail-info"), children: [
                    _jsx(UiIcon, { type: "click", size: 12, color: "currentColor" }), " ", intl.formatMessage({ id: "kdaDialog.dialog.keyDrives.overview.detail.tip" }, {
                        category,
                    })] })
        ] }));
}
function getTitle(intl, metric, item) {
    if (typeof item === "string") {
        return "";
    }
    return intl.formatMessage({ id: "kdaDialog.dialog.keyDrives.overview.detail.title" }, {
        title: metric,
        category: item.data.title,
    });
}
function getAttribute(item) {
    if (typeof item === "string") {
        return "";
    }
    return item.data.title;
}
function getCategory(item) {
    if (typeof item === "string") {
        return "";
    }
    return item.data.category;
}
function getSummaryLoading(state, globalLoading) {
    if (state.definition) {
        const from = state.fromValue;
        const to = state.toValue;
        return globalLoading || from?.value === undefined || to?.value === undefined;
    }
    return globalLoading ?? false;
}
//# sourceMappingURL=KeyDriversOverview.js.map