import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { simplifyText } from "@gooddata/util";
import { Bubble } from "../../Bubble/Bubble.js";
import { BubbleHoverTrigger } from "../../Bubble/BubbleHoverTrigger.js";
import { Button } from "../../Button/Button.js";
import { ColorPreview } from "../../Dialog/StylingEditorDialog/ColorPreview.js";
import { Item, ItemsWrapper, Separator } from "../../List/MenuList.js";
import { Menu } from "../../Menu/Menu.js";
import { ShortenedText } from "../../ShortenedText/ShortenedText.js";
const TEXT_TOOLTIP_ALIGN_POINTS = [
    { align: "tc bc", offset: { x: 0, y: 0 } },
    { align: "bc tc", offset: { x: 0, y: 0 } },
];
export function StylingSettingListItem({ item, itemToColorPreview, isSelected, isDeletable, onClick, onEdit, onDelete, onMenuToggle = () => { }, }) {
    const intl = useIntl();
    const { name, ref, content } = item;
    const colorsPreview = itemToColorPreview(content);
    const [opened, setOpened] = useState(false);
    const onOpenedChange = ({ opened }) => setOpened(opened);
    const toggleMenu = () => {
        if (ref) {
            onMenuToggle?.(ref);
        }
        setOpened(!opened);
    };
    const isMenuVisible = onEdit || onDelete;
    return (_jsxs("div", { className: cx("gd-styling-picker-list-item", "s-styling-picker-list-item", `s-styling-picker-list-item-${simplifyText(name ?? "")}`, {
            "is-selected": isSelected,
        }), children: [
            _jsxs("label", { className: "input-radio-label gd-styling-picker-list-item-content", children: [
                    _jsx("input", { "aria-label": simplifyText(name ?? ""), type: "radio", className: "input-radio", readOnly: true, checked: isSelected, onClick: () => ref && onClick(ref) }), _jsx(ColorPreview, { className: "gd-styling-picker-list-item-colors", colors: colorsPreview }), _jsx("span", { className: "input-label-text gd-styling-picker-list-item-text", children: _jsx(ShortenedText, { className: "gd-styling-picker-list-item-text-shortened", tooltipAlignPoints: TEXT_TOOLTIP_ALIGN_POINTS, children: name ?? "" }) })
                ] }), isMenuVisible ? (_jsx(Menu, { toggler: _jsx(Button, { value: "...", className: "gd-button-link-dimmed gd-styling-item-menu s-menu-toggle", onClick: toggleMenu }), opened: opened, openAction: "click", closeOnScroll: true, onOpenedChange: onOpenedChange, children: _jsxs(ItemsWrapper, { className: "s-styling-item-menu-items", smallItemsSpacing: true, children: [
                        _jsx(Item, { className: "s-styling-item-menu-item-edit", onClick: () => onEdit?.(item), children: intl.formatMessage({ id: "stylingPicker.item.edit" }) }), _jsx(Separator, {}), _jsx(Item, { className: "s-styling-item-menu-item-delete", onClick: () => isDeletable && ref && onDelete?.(ref), disabled: !isDeletable, children: _jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, children: [intl.formatMessage({ id: "stylingPicker.item.delete" }), isDeletable ? null : (_jsx(Bubble, { className: "bubble-primary", children: intl.formatMessage({ id: "stylingPicker.item.delete.tooltip" }) }))] }) })
                    ] }) })) : null] }));
}
