import { RefObject } from 'react';

import { FormGroup } from '@/components/form/FormGroup';
import { NumberInputField, NumberInputProps, NumberInputRoot } from '../ui/number-input';
import { useFormidableContextElement } from '../formidable';

export type FormNumberProps = Pick<
  NumberInputProps,
  'step' | 'defaultValue' | 'min' | 'max'
> & {
  name: string;
  ref?: RefObject<any>;
  label?: string;
  placeholder?: string;
  isRequired?: boolean;
};

export const FormNumber = ({
  name,
  ref,
  placeholder,
  step,
  min,
  max,
  defaultValue,
  ...rest
}: FormNumberProps) => {
  const {form, value, isModify, onChange, onRestore} = useFormidableContextElement(name);
  return (
    <FormGroup
      enableModifyNotification={form.configuration.enableModifyNotification}
      enableReset={form.configuration.enableReset}
      isModify={isModify}
      onRestore={onRestore}
      {...rest}
    >
      <NumberInputRoot
        ref={ref}
        value={value}
        onValueChange={(e) => onChange(e.value)}
        step={step}
        defaultValue={defaultValue}
        min={min}
        max={max}
      >
        <NumberInputField />
      </NumberInputRoot>
    </FormGroup>
  );
};