import { RefObject } from 'react';

import { FormGroup } from '@/components/form/FormGroup';

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

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 name={name} {...rest}>
      <NumberInputRoot
        ref={ref}
        value={value}
        onValueChange={(e) => onChange(e.value)}
        step={step}
        defaultValue={defaultValue}
        min={min}
        max={max}
      >
        <NumberInputField />
      </NumberInputRoot>
    </FormGroup>
  );
};
