import React, { useEffect, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { useDropdownSelectFilterState } from '../../hooks';
import { Box, RadioGroup } from '@wix/design-system';
import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
function _RadioGroupFilter(props) {
    const { filter, data = [], renderItem } = props;
    const { dropdownSelect, init } = useDropdownSelectFilterState({
        filter,
    });
    const { radioGroup: { spacing }, } = usePatternsTheme();
    const { select: { selectedValues }, container: { translate: t }, } = dropdownSelect;
    const defaultValue = { id: 'all', name: t('cairo.filtersPanel.default.All') };
    useEffect(() => {
        return init();
    }, []);
    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", dataHook: `radio-group-filter-${filter.name}` },
        React.createElement(RadioGroup, { dataHook: "radio-group-filter-group", value: selectedValues[0]?.key || defaultValue.id, spacing: spacing, onChange: (v) => {
                if (v?.toString() === defaultValue.id) {
                    dropdownSelect.clear();
                }
                else {
                    const newItem = keyedItems.find((item) => item.key === v?.toString());
                    newItem && dropdownSelect.setSingle(newItem);
                }
            } },
            React.createElement(RadioGroup.Radio, { value: defaultValue.id, dataHook: "radio-group-filter-option-all" }, defaultValue.name),
            keyedItems.map((keyedItem, index) => {
                const radioProps = renderItem?.(keyedItem.item, index);
                const key = keyedItem.key;
                return (React.createElement(RadioGroup.Radio, { ...radioProps, key: key, value: key, dataHook: `radio-group-filter-option-${key}` }, radioProps?.children ?? filter.itemName(keyedItem.item)));
            }))));
}
export const RadioGroupFilter = observer(_RadioGroupFilter);
RadioGroupFilter.displayName = 'RadioGroupFilter';
//# sourceMappingURL=RadioGroupFilter.js.map