import React, { useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Checkbox } from '@wix/design-system';
function _MultiInlineCheckbox(props) {
    const { renderItem, data, state, ...rest } = props;
    const { filter, select } = state;
    const keyedItems = useMemo(() => data.map((item, index) => {
        const key = filter.itemKey(item);
        return {
            id: key,
            key,
            item,
            index,
            indexWithinPage: index,
            pageIndex: 0,
        };
    }), [data]);
    return (React.createElement(Box, { direction: "vertical", gap: "SP2", ...rest }, keyedItems.map((keyedItem, index) => {
        const checkboxProps = renderItem?.(keyedItem.item, index);
        return (React.createElement(Checkbox, { ...checkboxProps, dataHook: `multi-inline-checkbox-${keyedItem.key}`, key: keyedItem.key, onChange: (e) => {
                const checked = e.target.checked;
                checked ? state.set(keyedItem) : state.delete(keyedItem);
                checkboxProps?.onChange?.(e);
            }, checked: checkboxProps?.checked || select.isChecked(keyedItem.key) }, checkboxProps?.children ?? filter.itemName(keyedItem.item)));
    })));
}
export const MultiInlineCheckbox = observer(_MultiInlineCheckbox);
//# sourceMappingURL=MultiInlineCheckbox.js.map