import React, { useMemo, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, DatePicker, Text, TimeInput, Input, } from '@wix/design-system';
import { TimeSmall } from '@wix/wix-ui-icons-common';
import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
function _DateRangePicker(props) {
    const { state, dataHook, popoverProps, ...rest } = props;
    const { translate: t, filterByTime } = state;
    const datePickerFrom = useRef(null);
    const datePickerTo = useRef(null);
    const { windowFlipPopoverProps } = useWindowFlipPopoverProps({
        popoverProps,
    });
    const { rangePicker } = usePatternsTheme();
    const commonInputProps = {
        size: rangePicker.size,
    };
    const commonDatePickerProps = {
        ...commonInputProps,
        shouldCloseOnSelect: true,
        dateStyle: 'medium',
        width: filterByTime ? '100%' : rangePicker.width,
        zIndex: rangePicker.zIndex,
    };
    const commonTimeInputProps = {
        ...commonInputProps,
        prefix: (React.createElement(Input.IconAffix, null,
            React.createElement(TimeSmall, null))),
        popoverProps: windowFlipPopoverProps,
    };
    const filterDateFrom = useMemo(() => (date) => state.filterDateFrom(date), [state.to]);
    const filterDateTo = useMemo(() => (date) => state.filterDateTo(date), [state.from]);
    const filterDateTimeFrom = useMemo(() => (date) => state.filterDateTimeFrom(date), [state.to, state.from, state.isToTimeSet]);
    const filterDateTimeTo = useMemo(() => (date) => state.filterDateTimeTo(date), [state.from, state.to, state.isFromTimeSet]);
    const fromPicker = (React.createElement(DatePicker, { ref: datePickerFrom, placeholderText: t('cairo.filtersPanel.date.title'), onChange: (from) => state.onFromSelected(from), value: state.from ?? undefined, filterDate: filterDateFrom, onClose: () => state.onFromClosed(), dataHook: "date-range-picker-from", popoverProps: {
            ...windowFlipPopoverProps,
            placement: 'bottom-start',
        }, clearButton: true, inputProps: {
            clearButtonAriaLabel: t('cairo.filtersPanel.date.from.clearButton.ariaLabel'),
        }, onClear: () => state.onFromSelected(null), ...rest, ...commonDatePickerProps }));
    const toPicker = (React.createElement(DatePicker, { ref: datePickerTo, placeholderText: t('cairo.filtersPanel.date.title'), onChange: (to) => state.onToSelected(to), value: state.to ?? undefined, filterDate: filterDateTo, onClose: () => state.onToClosed(), dataHook: "date-range-picker-to", popoverProps: {
            ...windowFlipPopoverProps,
            placement: 'bottom-end',
        }, clearButton: true, inputProps: {
            clearButtonAriaLabel: t('cairo.filtersPanel.date.to.clearButton.ariaLabel'),
        }, onClear: () => state.onToSelected(null), ...rest, ...commonDatePickerProps }));
    return (React.createElement(Box, { direction: filterByTime ? 'vertical' : 'horizontal', gap: "SP2", dataHook: dataHook, width: "100%" },
        React.createElement(Box, { direction: "vertical", gap: "SP1" },
            React.createElement(Text, { size: "small" }, t('cairo.filtersPanel.date.from.placeholder')),
            filterByTime ? (React.createElement(Box, { gap: "SP2", width: "100%" },
                React.createElement(Box, { flex: 1 }, fromPicker),
                React.createElement(TimeInput, { dataHook: "date-range-picker-time-from", placeholder: t('cairo.filtersPanel.time.title'), value: state.isFromTimeSet ? state.from : null, onChange: ({ date }) => state.onFromTimeSelected(date), disabled: !state.from, filterTime: filterDateTimeFrom, size: "small", ...commonTimeInputProps }))) : (fromPicker)),
        React.createElement(Box, { direction: "vertical", gap: "SP1" },
            React.createElement(Text, { size: "small" }, t('cairo.filtersPanel.date.to.placeholder')),
            filterByTime ? (React.createElement(Box, { gap: "SP2", width: "100%" },
                React.createElement(Box, { flex: 1 }, toPicker),
                React.createElement(TimeInput, { dataHook: "date-range-picker-time-to", placeholder: t('cairo.filtersPanel.time.title'), value: state.isToTimeSet ? state.to : null, onChange: ({ date }) => state.onToTimeSelected(date), disabled: !state.to, filterTime: filterDateTimeTo, ...commonTimeInputProps }))) : (toPicker))));
}
export const DateRangePicker = observer(_DateRangePicker);
//# sourceMappingURL=DateRangePicker.js.map