import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback, useMemo, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { Dropdown, DropdownButton, DropdownList, SingleSelectListItem, Typography, } from "@gooddata/sdk-ui-kit";
import { useDashboardSelector } from "../../../../../model/react/DashboardStoreProvider.js";
import { useWidgetFilters } from "../../../../../model/react/useWidgetFilters.js";
import { selectSeparators } from "../../../../../model/store/config/configSelectors.js";
import { selectInsightByRef } from "../../../../../model/store/insights/insightsSelectors.js";
import { useDashboardComponentsContext } from "../../../../dashboardContexts/DashboardComponentsContext.js";
import { InsightDescription } from "./InsightDescription.js";
const getStateFromConfig = (descriptionConfig, widgetDescription, insightDescription) => {
    if (!descriptionConfig.visible) {
        return {
            config: "none",
            description: "",
            includeMetrics: false,
        };
    }
    const useInsightDescription = descriptionConfig.source === "insight";
    return {
        config: descriptionConfig.source,
        description: useInsightDescription ? insightDescription : widgetDescription,
        includeMetrics: descriptionConfig.includeMetrics ?? false,
    };
};
export function InsightDescriptionConfig({ descriptionConfig, widget, setDescriptionConfiguration, isWidgetDescriptionEnabled, setWidgetDescription, }) {
    const intl = useIntl();
    const dropdownItems = useMemo(() => [
        {
            id: "insight",
            title: intl.formatMessage({ id: "configurationPanel.visualprops.inheritDescription" }),
            info: intl.formatMessage({ id: "configurationPanel.visualprops.inheritDescriptionHelp" }),
        },
        {
            id: "widget",
            title: intl.formatMessage({ id: "configurationPanel.visualprops.customDescription" }),
            info: intl.formatMessage({ id: "configurationPanel.visualprops.customDescriptionHelp" }),
        },
        {
            id: "none",
            title: intl.formatMessage({ id: "configurationPanel.visualprops.noneDescription" }),
        },
    ], [intl]);
    const { LoadingComponent } = useDashboardComponentsContext();
    const insight = useDashboardSelector(selectInsightByRef(widget.insight));
    const separators = useDashboardSelector(selectSeparators);
    const { result } = useWidgetFilters(widget, insight);
    const [widgetDescriptionState, setWidgetDescriptionState] = useState(getStateFromConfig(descriptionConfig, widget.description, insight?.insight?.summary));
    const [lastCustomWidgetDescription, setLastCustomWidgetDescription] = useState(widget.description);
    const handleDescriptionChange = useCallback((newDescription) => {
        setWidgetDescription(widget, newDescription);
        setWidgetDescriptionState((prevState) => ({ ...prevState, description: newDescription }));
        setLastCustomWidgetDescription(newDescription);
    }, [widget, setWidgetDescription, setWidgetDescriptionState]);
    const handleDescriptionConfigChange = useCallback((config) => {
        let newConfig;
        const insightDescription = insight?.insight?.summary;
        if (config === "none") {
            newConfig = {
                includeMetrics: false,
                visible: false,
                source: "insight",
            };
            setWidgetDescriptionState(getStateFromConfig(newConfig, "", ""));
        }
        else {
            newConfig = {
                includeMetrics: widgetDescriptionState.includeMetrics,
                visible: true,
                source: config,
            };
            setWidgetDescriptionState(getStateFromConfig(newConfig, config === "widget" ? lastCustomWidgetDescription : "", insightDescription));
        }
        setDescriptionConfiguration(widget, newConfig);
        if (config === "widget") {
            setWidgetDescription(widget, lastCustomWidgetDescription ?? "");
        }
        if (config === "none" || config === "insight") {
            setWidgetDescription(widget, "");
        }
    }, [
        widget,
        insight,
        setDescriptionConfiguration,
        setWidgetDescription,
        widgetDescriptionState.includeMetrics,
        lastCustomWidgetDescription,
    ]);
    return (_jsx(_Fragment, { children: isWidgetDescriptionEnabled ? (_jsxs("div", { className: "configuration-category s-description-configuration description-configuration-section", children: [
                _jsx(Typography, { tagName: "h3", children: _jsx(FormattedMessage, { id: "configurationPanel.visualprops.sectionDescription" }) }), _jsx(Dropdown, { closeOnParentScroll: true, renderBody: ({ closeDropdown }) => (_jsx(DropdownList, { items: dropdownItems, renderItem: ({ item }) => {
                            return (_jsx(SingleSelectListItem, { title: item.title, info: item.info, isSelected: item.id === widgetDescriptionState.config, onClick: () => {
                                    handleDescriptionConfigChange(item.id);
                                    closeDropdown();
                                } }));
                        } })), renderButton: ({ openDropdown, isOpen }) => (_jsx(DropdownButton, { value: dropdownItems.find((item) => item.id === widgetDescriptionState.config)
                            ?.title, isOpen: isOpen, onClick: openDropdown, className: "description-config-dropdown-button s-description-config-dropdown-button" })) }), widgetDescriptionState.config === "widget" ||
                    widgetDescriptionState.config === "insight" ? (_jsx(InsightDescription, { description: widgetDescriptionState.description ?? "", setDescription: handleDescriptionChange, readOnly: widgetDescriptionState.config === "insight", LoadingComponent: LoadingComponent, insightFilters: result, separators: separators })) : null] })) : null }));
}
