import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useState } from "react";
import { useIntl } from "react-intl";
import { Button, Typography } from "@gooddata/sdk-ui-kit";
import { useDashboardSelector } from "../../../../model/react/DashboardStoreProvider.js";
import { useDashboardUserInteraction } from "../../../../model/react/useDashboardUserInteraction.js";
import { selectInsightsMap } from "../../../../model/store/insights/insightsSelectors.js";
import { InsightPicker } from "./InsightPicker.js";
import { VisualizationsList } from "./VisualizationsList/VisualizationsList.js";
export function VisualizationsPage({ visualizations, activeVisualizationId, onVisualizationDeleted, onVisualizationAdd, onVisualizationSelect, onVisualizationPositionChange, }) {
    const [isVisualizationPickerVisible, setVisualizationPickerVisible] = useState(false);
    const intl = useIntl();
    const userInteraction = useDashboardUserInteraction();
    const insights = useDashboardSelector(selectInsightsMap);
    const onAdd = () => {
        setVisualizationPickerVisible(!isVisualizationPickerVisible);
    };
    const onBack = () => {
        setVisualizationPickerVisible(!isVisualizationPickerVisible);
    };
    const onAdded = (insight) => {
        onVisualizationAdd(insight);
        setVisualizationPickerVisible(false);
        userInteraction.visualizationSwitcherInteraction("visualizationSwitcherVisualizationAdded");
    };
    return isVisualizationPickerVisible ? (_jsx(InsightPicker, { onInsightSelect: onAdded, onBack: onBack })) : (_jsx("div", { className: "edit-insight-config", children: _jsxs("div", { className: "insight-configuration", children: [
                _jsx("div", { className: "insight-configuration-panel-header", children: _jsx(Typography, { tagName: "h3", className: "widget-title", children: _jsx("span", { children: intl.formatMessage({
                                id: "visualizationSwitcherToolbar.visualizationsList.header",
                            }) }) }) }), _jsxs("div", { className: "insight-configuration-content", children: [visualizations.length === 0 && (_jsx("div", { className: "no-visualizations-text", children: intl.formatMessage({
                                id: "visualizationSwitcherToolbar.visualizationsList.empty",
                            }) })), _jsx("div", { className: "visualizations-list", children: _jsx(VisualizationsList, { visualizations: visualizations, insights: insights, activeVisualizationId: activeVisualizationId, onVisualizationDeleted: onVisualizationDeleted, onVisualizationSelect: onVisualizationSelect, onVisualizationPositionChange: onVisualizationPositionChange }) }), _jsx("div", { className: "horizontal-divider", children: _jsx("div", { className: "horizontal-divider-line" }) }), _jsx(Button, { className: "gd-button-link gd-icon-plus gd-add-visualization s-visualization-switcher-add-button", onClick: onAdd, children: intl.formatMessage({ id: "visualizationSwitcherToolbar.visualizationsList.add" }) })
                    ] })
            ] }) }));
}
