import React from 'react';
import { observer } from 'mobx-react-lite';
import { FieldSet, FormField, NumberInput } from '@wix/design-system';
import { FilterProps } from '../../model';
import type { RangeItem } from '@wix/bex-core';
import { useNumberRangeFilter } from './useNumberRangeFilter';

export interface NumberRangeFilterProps extends FilterProps<RangeItem<number>> {
  decimal?: boolean;
  min?: number;
  max?: number;
}

function NumberRangeFilter({
  filter,
  decimal = false,
  min,
  max,
}: NumberRangeFilterProps) {
  const {
    fromValue,
    toValue,
    fromError,
    toError,
    handleInputChange,
    placeholder,
    commonInputProps,
    t,
  } = useNumberRangeFilter({
    filter,
    decimal,
    min,
    max,
  });

  return (
    <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 } : {})}
    >
      <FormField
        dataHook="number-range-filter-from-form-field"
        label={t('cairo.filtersPanel.numRange.min-from')}
        {...(fromError ? { status: 'error' } : {})}
      >
        <NumberInput
          {...commonInputProps}
          placeholder={placeholder.min}
          value={fromValue ?? ''}
          onChange={(value) => handleInputChange({ from: value, isFrom: true })}
          dataHook="number-range-filter-from-input"
          size="medium"
        />
      </FormField>
      <FormField
        dataHook="number-range-filter-to-form-field"
        label={t('cairo.filtersPanel.numRange.maxRange-to')}
        {...(toError ? { status: 'error', statusMessage: toError } : {})}
      >
        <NumberInput
          {...commonInputProps}
          placeholder={placeholder.max}
          value={toValue ?? ''}
          onChange={(value) => handleInputChange({ to: value, isFrom: false })}
          dataHook="number-range-filter-to-input"
          size="medium"
        />
      </FormField>
    </FieldSet>
  );
}

export default observer(NumberRangeFilter);