Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useForm } from 'react-hook-form';

import Form from '@components/common/form';
import Input from '@components/UI/inputs/Input';
import Button from '@components/UI/buttons/Buttons';
import Ckeditor from '@components/common/ckeditor/Ckeditor';
import LoadingWrapper from '@components/common/loading-wrapper';
import DatetimePicker from '@components/common/inputs/datetime-picker';

function ProgressForm({
  onSubmit = () => {},
  defaultValues = {
    date: null,
    quantitative_value: 0,
    qualitative_description: ''
  },
  values = {}
}) {
  const {
    control,
    formState: { errors, isSubmitting },
    watch,
    handleSubmit
  } = useForm({
    defaultValues,
    values
  });
  const watchedDate = watch('date', new Date());

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <LoadingWrapper loading={isSubmitting} displayChildren>
        <Input
          control={control}
          label='Valor cuantitativo:'
          name='quantitative_value'
          type='number'
          rules={{ required: 'El valor es requerido' }}
          error={errors.quantitative_value?.message}
        />

        <Ckeditor
          control={control}
          name='qualitative_description'
          error={errors.qualitative_description?.message}
          rules={{ required: 'La descripción es requerida' }}
          label='Descripción cualitativa:'
        />

        <DatetimePicker
          label='Fecha'
          name='date'
          control={control}
          defaultValue={new Date(watchedDate)}
          rules={{
            required: { value: true, message: 'La fecha es requerida' },
            validate: {
              beGreaterThanToday: (value) =>
                new Date(value) > new Date() || 'La fecha debe ser mayor a la fecha actual'
            }
          }}
          displayTime
          parseFormat='YYYY-MM-DD HH:mm:ss'
        />

        <Button color='primary' type='submit'>
          Enviar
        </Button>
      </LoadingWrapper>
    </Form>
  );
}

export default ProgressForm;