import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useCallback, useState } from "react";
import cx from "classnames";
import { insightVisualizationType } from "@gooddata/sdk-model";
import { Button, InsightListItemTypeIcon, ShortenedText } from "@gooddata/sdk-ui-kit";
import { VisualizationListMenu } from "./VisualizationListMenu.js";
const visualizationIconWidthAndPadding = 42;
const tooltipAlignPoints = [
    {
        align: "cr cl",
    },
    {
        align: "cl cr",
        offset: {
            x: -visualizationIconWidthAndPadding,
            y: 0,
        },
    },
];
export function VisualizationListItem({ visualization, insight, isActive, isLast, isFirst, shouldRenderActions, onVisualizationDeleted, onVisualizationSelect, onVisualizationPositionChange, }) {
    const [isOpen, setIsOpen] = useState(false);
    const [active, setActive] = useState("");
    const onMenuButtonClick = useCallback(() => {
        setIsOpen(!isOpen);
        setActive("");
    }, [isOpen]);
    const handleClick = useCallback((id) => {
        setIsOpen(!isOpen);
        setActive(id);
    }, [isOpen]);
    return (_jsxs(_Fragment, { children: [
            _jsxs("div", { className: cx("switcher-visualizations-list-item", {
                    "is-selected": isActive,
                    "is-active": active === visualization.identifier,
                }), children: [
                    _jsx("div", { className: "switcher-visualizations-list-item-content", onClick: () => onVisualizationSelect(visualization.identifier), children: _jsxs("div", { className: "visualization-title", children: [insight ? (_jsx(InsightListItemTypeIcon, { type: insightVisualizationType(insight) })) : null, _jsx("div", { className: "gd-visualizations-list-item-content", children: _jsx("div", { className: "gd-visualizations-list-item-content-name", children: _jsx(ShortenedText, { className: "gd-visualizations-list-item-content-name-text", tooltipAlignPoints: tooltipAlignPoints, children: visualization.title }) }) })
                            ] }) }), _jsx(Button, { onClick: () => handleClick(visualization.identifier), value: "\u22EF", className: cx(`gd-vis-switcher-show-more-button gd-button s-visualization-switcher-more-menu-button-${visualization.identifier}`, {
                            "is-active": active === visualization.identifier,
                        }) }, visualization.identifier)
                ] }, visualization.identifier), isOpen ? (_jsx(VisualizationListMenu, { alignTo: `.s-visualization-switcher-more-menu-button-${visualization.identifier}`, visualization: visualization, isLast: isLast, isFirst: isFirst, shouldRenderActions: shouldRenderActions, onMenuButtonClick: onMenuButtonClick, onVisualizationDeleted: onVisualizationDeleted, onVisualizationPositionChange: onVisualizationPositionChange })) : null] }));
}
//# sourceMappingURL=VisualizationListItem.js.map