import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useMemo } from "react";
import classNames from "classnames";
import { insightVisualizationType } from "@gooddata/sdk-model";
import { INSIGHT_WIDGET_SIZE_INFO_DEFAULT } from "@gooddata/sdk-ui-ext";
import { InsightListItemDate, InsightListItemTypeIcon, getDateTimeConfig } from "@gooddata/sdk-ui-kit";
import { getSizeInfo } from "../../../_staging/layout/sizing.js";
import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
import { useWidgetSelection } from "../../../model/react/useWidgetSelection.js";
import { selectSettings } from "../../../model/store/config/configSelectors.js";
import { selectIsInEditMode } from "../../../model/store/renderMode/renderModeSelectors.js";
import { useWidgetDragEndHandler } from "../../dragAndDrop/draggableWidget/useWidgetDragEndHandler.js";
import { useDashboardDrag } from "../../dragAndDrop/useDashboardDrag.js";
/**
 * A single draggable insight item for the insight picker panel.
 * Renders a visualization type icon, title, and last-updated date.
 *
 * @internal
 */
export function InsightPickerListItem({ item, type, sourceInsight, metadataTimeZone, onActivate, onDropped, }) {
    const isInEditMode = useDashboardSelector(selectIsInEditMode);
    const settings = useDashboardSelector(selectSettings);
    const handleDragEnd = useWidgetDragEndHandler();
    const { deselectWidgets } = useWidgetSelection();
    const canDrag = isInEditMode && !!sourceInsight;
    const [{ isDragging }, dragRef] = useDashboardDrag({
        dragItem: () => {
            if (!sourceInsight) {
                // Should not happen since canDrag is false, but satisfy types
                return {
                    type: "insightListItem",
                    insight: undefined,
                    size: { gridHeight: 0, gridWidth: 0 },
                };
            }
            const sizeInfo = getSizeInfo(settings, "insight", sourceInsight);
            return {
                type: "insightListItem",
                insight: sourceInsight,
                size: {
                    gridHeight: sizeInfo.height.default || INSIGHT_WIDGET_SIZE_INFO_DEFAULT.height.default,
                    gridWidth: sizeInfo.width.default || INSIGHT_WIDGET_SIZE_INFO_DEFAULT.width.default,
                },
            };
        },
        canDrag,
        hideDefaultPreview: false,
        dragEnd: (_item, monitor) => {
            handleDragEnd();
            if (monitor.didDrop()) {
                onDropped?.();
            }
        },
        dragStart: () => deselectWidgets(),
    }, [canDrag, sourceInsight, settings, handleDragEnd, onDropped]);
    const resolvedType = sourceInsight ? (insightVisualizationType(sourceInsight) ?? type) : type;
    const updated = item.updated ?? item.created;
    const dateConfig = useMemo(() => (updated ? getDateTimeConfig(updated, { dateTimezone: metadataTimeZone }) : undefined), [updated, metadataTimeZone]);
    return (_jsxs("div", { className: classNames("gd-insight-picker-list-item", {
            "is-dragging": isDragging,
            "is-not-draggable": !canDrag,
        }), ref: dragRef, onClick: sourceInsight ? () => onActivate?.(sourceInsight) : undefined, children: [
            _jsx("div", { className: "gd-insight-picker-list-item__icon", children: _jsx(InsightListItemTypeIcon, { type: resolvedType }) }), _jsxs("div", { className: "gd-insight-picker-list-item__content", children: [
                    _jsx("div", { className: "gd-insight-picker-list-item__title", title: item.title, children: item.title }), dateConfig ? (_jsx("div", { className: "gd-insight-picker-list-item__date", children: _jsx(InsightListItemDate, { config: dateConfig }) })) : null] })
        ] }));
}
