import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback, useEffect, useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { RichTextWithTooltip, TextAreaWithSubmit } from "@gooddata/sdk-ui-kit";
import { useDashboardSelector } from "../../../../../model/react/DashboardStoreProvider.js";
import { selectEnableRichTextDescriptions, selectEnableRichTextDynamicReferences, } from "../../../../../model/store/config/configSelectors.js";
import { selectExecutionTimestamp } from "../../../../../model/store/ui/uiSelectors.js";
const richTextTooltipAlignPoints = [
    { align: "bl tl", offset: { x: 4, y: 5 } },
    { align: "tl bl", offset: { x: 4, y: -5 } },
];
export function InsightDescription({ description, setDescription, readOnly = false, LoadingComponent, insightFilters, separators, }) {
    const isRichTextReferencesEnabled = useDashboardSelector(selectEnableRichTextDynamicReferences);
    const intl = useIntl();
    const placeholder = intl.formatMessage({
        id: "configurationPanel.visualprops.descriptionPlaceholder",
    });
    const useRichText = useDashboardSelector(selectEnableRichTextDescriptions);
    const [isRichTextEditing, setIsRichTextEditing] = useState(false);
    const [richTextValue, setRichTextValue] = useState(description);
    const executionTimestamp = useDashboardSelector(selectExecutionTimestamp);
    useEffect(() => {
        setRichTextValue(description);
    }, [description]);
    const onChange = useCallback((value) => {
        setDescription(value.trim());
    }, [setDescription]);
    const onDescriptionClick = useCallback(() => {
        if (!isRichTextEditing && !readOnly) {
            setIsRichTextEditing(true);
        }
    }, [isRichTextEditing, readOnly]);
    const onDescriptionBlur = useCallback(() => {
        setIsRichTextEditing(false);
        onChange(richTextValue);
    }, [onChange, richTextValue]);
    const onRichTextChange = useCallback((value) => {
        setRichTextValue(value);
    }, []);
    return (_jsx("label", { className: "gd-input", children: useRichText ? (_jsx("div", { className: cx("gd-input-field gd-rich-text-insight-description", { disabled: readOnly }), onClick: onDescriptionClick, onBlur: onDescriptionBlur, children: _jsx(RichTextWithTooltip, { value: richTextValue, renderMode: isRichTextEditing ? "edit" : "view", onChange: onRichTextChange, editRows: 4, editPlaceholder: placeholder, emptyElement: readOnly ? undefined : (_jsx("div", { className: "gd-editable-label-richtext-empty", children: placeholder })), showTooltip: isRichTextEditing, tooltipAlignPoints: richTextTooltipAlignPoints, referencesEnabled: isRichTextReferencesEnabled, LoadingComponent: LoadingComponent, filters: insightFilters, separators: separators, execConfig: {
                    timestamp: executionTimestamp,
                } }) })) : (_jsx(TextAreaWithSubmit, { className: cx("gd-input-field description gd-widget-description-input"), rows: 4, defaultValue: (description || "").trim(), maxLength: 2000, placeholder: readOnly ? undefined : placeholder, onSubmit: onChange, disabled: readOnly })) }));
}
