import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2019-2026 GoodData Corporation
import { memo } from "react";
import cx from "classnames";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { IconPosition } from "../colorDropdown/ColorDropdown.js";
import { getIconStyle } from "../colorDropdown/ColorPaletteItem.js";
import { OptionalPatternFill } from "../colorDropdown/OptionalPatternFill.js";
export const ColoredItemContent = memo(function ColoredItemContent({ color, position, align = "right", chartFill = "solid", patternFillIndex = 0, text, isSelected, disabled, }) {
    const theme = useTheme();
    const getItemClassNames = () => {
        return cx("gd-list-item gd-color-config-list-item s-colored-items-list-item", {
            "is-active": isSelected && !disabled,
            "is-disabled": disabled,
            "s-is-disabled": disabled,
        });
    };
    const getPreviewBoxClassNames = () => {
        const { r, g, b } = color;
        const isSolidFill = chartFill === "solid";
        return cx("gd-color-config-item-sample", `s-color-${r}-${g}-${b}`, {
            "gd-icon-navigateright": isSolidFill && position == IconPosition.Right,
            "gd-icon-navigatedown": isSolidFill && position === IconPosition.Down,
        });
    };
    const getColorSampleStyle = () => {
        const { r, g, b } = color;
        const baseColor = `rgb(${r},${g},${b})`;
        return getIconStyle(chartFill, baseColor, theme);
    };
    return (_jsxs("div", { className: getItemClassNames(), children: [align === "left" ? _jsx("span", { children: text }) : null, _jsx("div", { className: getPreviewBoxClassNames(), style: getColorSampleStyle(), children: _jsx(OptionalPatternFill, { chartFill: chartFill, patternFillIndex: patternFillIndex }) }), align === "right" ? _jsx("span", { children: text }) : null] }));
});
//# sourceMappingURL=ColoredItemContent.js.map