import React from 'react';
import { observer } from 'mobx-react-lite';
import { FieldSet, FormField, NumberInput } from '@wix/design-system';
import { useNumberRangeFilter } from './useNumberRangeFilter';
function NumberRangeFilter({ filter, decimal = false, min, max, }) {
    const { fromValue, toValue, fromError, toError, handleInputChange, placeholder, commonInputProps, t, } = useNumberRangeFilter({
        filter,
        decimal,
        min,
        max,
    });
    return (React.createElement(FieldSet, { dataHook: `number-range-filter-${filter.name}`, direction: "horizontal", gap: "medium", columns: "1fr 1fr", legend: `Number range filter - ${filter.name}`, legendPlacement: "none", ...(fromError ? { status: 'error', statusMessage: fromError } : {}) },
        React.createElement(FormField, { dataHook: "number-range-filter-from-form-field", label: t('cairo.filtersPanel.numRange.min-from'), ...(fromError ? { status: 'error' } : {}) },
            React.createElement(NumberInput, { ...commonInputProps, placeholder: placeholder.min, value: fromValue ?? '', onChange: (value) => handleInputChange({ from: value, isFrom: true }), dataHook: "number-range-filter-from-input", size: "medium" })),
        React.createElement(FormField, { dataHook: "number-range-filter-to-form-field", label: t('cairo.filtersPanel.numRange.maxRange-to'), ...(toError ? { status: 'error', statusMessage: toError } : {}) },
            React.createElement(NumberInput, { ...commonInputProps, placeholder: placeholder.max, value: toValue ?? '', onChange: (value) => handleInputChange({ to: value, isFrom: false }), dataHook: "number-range-filter-to-input", size: "medium" }))));
}
export default observer(NumberRangeFilter);
//# sourceMappingURL=NumberRangeFilter.js.map