'use strict';

var tslib_es6 = require('./tslib.es6-cjs.js');
var React = require('react');
var classnames = require('classnames');
var Icon = require('./Icon-cjs.js');
var Flex = require('./Flex-cjs.js');
var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');

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

function FilterPickerOption(props) {
    const { customRender, onClick } = props, contentProps = tslib_es6.__rest(props, ["customRender", "onClick"]);
    const { selected, selectionHandler } = React.useContext(FilterPickerProvider.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.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.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected }))) }))) : (React.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
}
function InternalDefaultContent(props) {
    return (React.createElement(React.Fragment, null,
        React.createElement(Flex.Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
            props.prefix,
            props.label),
        React.createElement("div", null, props.isSelected && (React.createElement(Icon.Icon, { name: "checkmark", color: "interactiveSubtle" })))));
}

exports.FilterPickerOption = FilterPickerOption;
