import { _ as __rest } from './tslib.es6-es.js';
import React__default, { useContext } from 'react';
import classnames from 'classnames';
import { I as Icon } from './Icon-es.js';
import { F as Flex } from './Flex-es.js';
import { a as FilterPickerContext } from './FilterPickerProvider-es.js';

var styles = {"option":"tjXkqP6ZdSk-","spinning":"yDp0Y9ojp0Y-"};

function FilterPickerOption(props) {
    const { customRender, onClick } = props, contentProps = __rest(props, ["customRender", "onClick"]);
    const { selected, selectionHandler } = useContext(FilterPickerContext);
    const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
    const handleClick = () => {
        const { id, label } = props;
        selectionHandler === null || selectionHandler === void 0 ? void 0 : selectionHandler({ id, label });
        onClick === null || onClick === void 0 ? void 0 : onClick({ id, label });
    };
    return (React__default.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: handleClick, className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected, defaultContent: (React__default.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected }))) }))) : (React__default.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
}
function InternalDefaultContent(props) {
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
            props.prefix,
            props.label),
        React__default.createElement("div", null, props.isSelected && (React__default.createElement(Icon, { name: "checkmark", color: "interactiveSubtle" })))));
}

export { FilterPickerOption as F };
