import { RefObject } from 'react';

import { Input } from '@chakra-ui/react';

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

export type FormInputProps = {
  form: UseFormidableReturn;
  variableName: string;
  ref?: RefObject<any>;
  label?: string;
  placeholder?: string;
  isRequired?: boolean;
};

export const FormInput = ({
  form,
  variableName,
  ref,
  placeholder,
  ...rest
}: FormInputProps) => {
  return (
    <FormGroup
      isModify={form.isModify[variableName]}
      onRestore={() => form.restoreValue({ [variableName]: true })}
      {...rest}
    >
      <Input
        ref={ref}
        value={form.values[variableName]}
        onChange={(e) => form.setValues({ [variableName]: e.target.value })}
      />
    </FormGroup>
  );
};