import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { useCallback, useEffect, useRef } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { simplifyText } from "@gooddata/util";
import { UiIcon } from "../@ui/UiIcon/UiIcon.js";
import { Button } from "../Button/Button.js";
import { DESCRIPTION_PANEL_ARROW_OFFSETS, DescriptionPanel } from "../DescriptionPanel/DescriptionPanel.js";
import { ShortenedText } from "../ShortenedText/ShortenedText.js";
import { getDateTimeConfig } from "../utils/dateTimeConfig.js";
import { InsightListItemDate } from "./InsightListItemDate.js";
const VISUALIZATION_TYPE_UNKNOWN = "unknown";
const WIDGET_TYPE_KPI = "kpi";
const visualizationIconWidthAndPadding = 42;
const tooltipAlignPoints = [
    {
        align: "cr cl",
    },
    {
        align: "cl cr",
        offset: {
            x: -visualizationIconWidthAndPadding,
            y: 0,
        },
    },
];
const modifiedArrowOffsets = {
    ...DESCRIPTION_PANEL_ARROW_OFFSETS,
    "cr cl": [30, 0],
};
/**
 * @internal
 */
export function InsightListItem({ title, description, updated, type = VISUALIZATION_TYPE_UNKNOWN, isSelected, isLoading, filters, separators, LoadingComponent, onClick, onDescriptionPanelOpen, showDescriptionPanel = false, useReferences = false, richTextExecConfig, width, isLocked, onDelete, metadataTimeZone, }) {
    const intl = useIntl();
    const shortenedTextRef = useRef(null);
    const currentWidthRef = useRef(width);
    const shouldRenderActions = !!onDelete;
    useEffect(() => {
        if (shortenedTextRef.current && currentWidthRef.current !== width) {
            currentWidthRef.current = width;
            shortenedTextRef.current.recomputeShortening();
        }
    }, [width]);
    const handleClickDelete = useCallback((e) => {
        e.stopPropagation();
        if (onDelete) {
            onDelete();
        }
    }, [onDelete]);
    return (_jsxs("div", { className: cx("gd-visualizations-list-item", `s-${simplifyText(title ?? "")}`, isSelected && "is-selected"), onClick: onClick, children: [shouldRenderActions ? (_jsx("div", { className: "gd-visualizations-list-item-actions", children: _jsx(Button, { className: "gd-button-link gd-button-icon-only gd-button-small\n                        gd-icon-trash gd-visualizations-list-item-action-delete s-delete-item", onClick: handleClickDelete }) })) : null, showDescriptionPanel ? (_jsx("div", { className: "gd-visualizations-list-item-description", children: _jsx(DescriptionPanel, { onBubbleOpen: onDescriptionPanelOpen, title: title, description: description, isLocked: isLocked, arrowOffsets: shouldRenderActions ? modifiedArrowOffsets : undefined, useReferences: useReferences, filters: filters, separators: separators, LoadingComponent: LoadingComponent, execConfig: richTextExecConfig }) })) : null, _jsxs("div", { className: "gd-visualizations-list-item-content", children: [
                    _jsxs("div", { className: "gd-visualizations-list-item-content-name", children: [isLocked ? _jsx(UiIcon, { type: "lock", size: 14, color: "complementary-6" }) : null, _jsx("div", { style: { maxWidth: "100%", whiteSpace: "nowrap" }, children: _jsx(ShortenedText, { ref: shortenedTextRef, tooltipAlignPoints: tooltipAlignPoints, displayTooltip: !showDescriptionPanel, children: isLoading
                                        ? intl.formatMessage({ id: "gs.visualizationsList.loading" })
                                        : (title ?? "") }) })
                        ] }), _jsx("div", { className: "gd-visualizations-list-item-content-date", children: _jsx(UpdatedDateTime, { date: updated, type: type, metadataTimeZone: metadataTimeZone }) })
                ] }), _jsx(InsightListItemTypeIcon, { type: type })
        ] }));
}
function UpdatedDateTime({ date, type, metadataTimeZone, }) {
    if (!date) {
        return null;
    }
    if (type === WIDGET_TYPE_KPI) {
        return _jsx("span", {});
    }
    const dateTimeConfig = getDateTimeConfig(date, { dateTimezone: metadataTimeZone });
    return _jsx(InsightListItemDate, { config: dateTimeConfig });
}
/**
 * @internal
 */
export function InsightListItemTypeIcon({ type }) {
    const iconClassName = cx("gd-vis-type", `gd-vis-type-${type}`);
    return (_jsx("div", { className: "gd-vis-type-container", children: _jsx("div", { className: iconClassName }) }));
}
