import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useState } from "react";
import { useIntl } from "react-intl";
import { ConfirmDialog } from "@gooddata/sdk-ui-kit";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { changeDashboardDensity } from "../../model/commands/density.js";
import { useDashboardDispatch, useDashboardSelector } from "../../model/react/DashboardStoreProvider.js";
import { uiActions } from "../../model/store/ui/index.js";
import { selectDashboardDensity } from "../../model/store/ui/uiSelectors.js";
const getDensityOptionLabel = (intl, density, defaultDensity) => {
    const standardLabel = intl.formatMessage({ id: "density.dialog.option.standard" });
    const compactLabel = intl.formatMessage({ id: "density.dialog.option.compact" });
    const label = density === "comfortable" ? standardLabel : compactLabel;
    return defaultDensity === density
        ? intl.formatMessage({ id: "density.dialog.option.default" }, { value: label })
        : label;
};
/**
 * @alpha
 */
export function DensityDialog() {
    const intl = useIntl();
    const dispatch = useDashboardDispatch();
    const currentDensity = useDashboardSelector(selectDashboardDensity);
    const theme = useTheme();
    const defaultDensity = theme?.dashboards?.density ?? "comfortable";
    const [selected, setSelected] = useState(currentDensity);
    const onCancel = () => dispatch(uiActions.closeDensityDialog());
    const onApply = () => {
        dispatch(uiActions.closeDensityDialog());
        if (selected !== currentDensity) {
            dispatch(changeDashboardDensity(selected));
        }
    };
    return (_jsxs(ConfirmDialog, { onCancel: onCancel, onSubmit: onApply, isPositive: true, className: "s-dialog s-density-dialog gd-density-dialog", headline: intl.formatMessage({ id: "density.dialog.title" }), cancelButtonText: intl.formatMessage({ id: "cancel" }), submitButtonText: intl.formatMessage({ id: "apply" }), children: [
            _jsx("div", { className: "gd-density-dialog-description", children: intl.formatMessage({ id: "density.dialog.description" }) }), _jsxs("div", { className: "gd-density-dialog-options", children: [
                    _jsxs("div", { className: "gd-density-dialog-option", children: [
                            _jsxs("label", { className: "input-radio-label", children: [
                                    _jsx("input", { type: "radio", name: "density", value: "comfortable", checked: selected === "comfortable", onChange: () => setSelected("comfortable"), className: "input-radio" }), _jsx("span", { className: "gd-density-dialog-option-title input-label-text", children: getDensityOptionLabel(intl, "comfortable", defaultDensity) })
                                ] }), _jsx("div", { className: "gd-density-dialog-option-description", children: intl.formatMessage({ id: "density.dialog.option.standard.description" }) })
                        ] }), _jsxs("div", { className: "gd-density-dialog-option", children: [
                            _jsxs("label", { className: "input-radio-label", children: [
                                    _jsx("input", { type: "radio", name: "density", value: "compact", checked: selected === "compact", onChange: () => setSelected("compact"), className: "input-radio" }), _jsx("span", { className: "gd-density-dialog-option-title input-label-text", children: getDensityOptionLabel(intl, "compact", defaultDensity) })
                                ] }), _jsx("div", { className: "gd-density-dialog-option-description", children: intl.formatMessage({ id: "density.dialog.option.compact.description" }) })
                        ] })
                ] })
        ] }));
}
//# sourceMappingURL=DensityDialog.js.map