import React, { useEffect, useMemo } from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { DateRangePicker } from '../DateRangePicker';
import { Box, Collapse, RadioGroup } from '@wix/design-system';
import { DateRangePreset, DefaultDateRangePreset, MAP_DATE_PRESET_TO_KEY, } from '@wix/bex-core';
import { useDateRangeFilterState } from '../../hooks';
import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
import { renderPresetToolbarTag } from './renderPresetToolbarTag';
function _DateRangeFilter(props) {
    const { filter, filterByTime, mode = 'COMBINE', dateRangeOptions, ...rest } = props;
    const { translate: t } = useWixPatternsContainer();
    const { radioGroup: { spacing }, } = usePatternsTheme();
    const state = useDateRangeFilterState({
        filter,
        filterByTime,
        mode,
    });
    const dateRangePreset = useMemo(() => {
        if (!dateRangeOptions) {
            return DefaultDateRangePreset;
        }
        const dateRangePresetArr = Object.keys(DateRangePreset).filter((key) => dateRangeOptions.includes(key));
        dateRangePresetArr.unshift(DateRangePreset.NONE);
        if (mode === 'COMBINE') {
            dateRangePresetArr.push(DateRangePreset.CUSTOM);
        }
        const dateRangePresetObjects = dateRangePresetArr.reduce((cur, key) => ({
            ...cur,
            [key]: DateRangePreset[key],
        }), {});
        return dateRangePresetObjects;
    }, [mode, dateRangeOptions]);
    useEffect(() => state.init(), []);
    const customElement = (React.createElement(DateRangePicker, { dataHook: "date-range-picker", state: state.dateRangePicker, ...rest }));
    const innerComponent = mode === 'ONLY_CUSTOM' ? (customElement) : (React.createElement(Box, { direction: "vertical" },
        React.createElement(RadioGroup, { value: state.dateRangePicker.selectedPreset, onChange: (v) => v && state.dateRangePicker.onPresetChanged(v.toString()), spacing: spacing, dataHook: "date-range-filter-group" },
            Object.values(dateRangePreset).map((preset) => preset === dateRangePreset.CUSTOM ? null : (React.createElement(RadioGroup.Radio, { key: preset, value: preset, dataHook: `date-range-filter-option-${preset}` }, t(MAP_DATE_PRESET_TO_KEY[preset])))),
            mode === 'COMBINE' && dateRangePreset.CUSTOM && (React.createElement(RadioGroup.Radio, { value: dateRangePreset.CUSTOM, dataHook: `date-range-filter-option-${dateRangePreset.CUSTOM}` }, t(MAP_DATE_PRESET_TO_KEY[dateRangePreset.CUSTOM])))),
        React.createElement(Collapse, { open: state.dateRangePicker.selectedPreset === dateRangePreset.CUSTOM },
            React.createElement(Box, { marginTop: "14px", overflowY: "visible" }, customElement))));
    return (React.createElement(Box, { dataHook: `date-range-filter-${filter.name}`, direction: "vertical" }, innerComponent));
}
export const DateRangeFilter = observer(_DateRangeFilter);
DateRangeFilter.displayName = 'DateRangeFilter';
DateRangeFilter.renderPresetToolbarTag = renderPresetToolbarTag;
//# sourceMappingURL=DateRangeFilter.js.map