import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { memo, useCallback, useMemo } from "react";
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { simplifyText } from "@gooddata/util";
/**
 * @internal
 */
export const MultiSelectListItem = memo(function MultiSelectListItem({ title, onClick, onMouseOver, onMouseOut, isSelected, onOnly, }) {
    const classNames = useMemo(() => {
        return cx({
            "gd-list-item": true,
            [`s-${simplifyText(title ?? "")}`]: true,
            "has-only-visible": true,
            "is-selected": isSelected,
        });
    }, [title, isSelected]);
    const handleOnlyClick = useCallback((e) => {
        e.stopPropagation();
        if (onOnly) {
            onOnly();
        }
    }, [onOnly]);
    const renderOnly = useCallback(() => {
        return (_jsx("span", { className: "gd-list-item-only", onClick: handleOnlyClick, children: _jsx(FormattedMessage, { id: "gs.list.only" }) }));
    }, [handleOnlyClick]);
    return (_jsxs("div", { className: classNames, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, children: [
            _jsxs("label", { className: "input-checkbox-label", children: [
                    _jsx("input", { type: "checkbox", className: "input-checkbox", readOnly: true, checked: isSelected }), _jsx("span", { className: "input-label-text", children: title })
                ] }), renderOnly()] }));
});
