Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Controller, useForm } from 'react-hook-form'
import { Button, InputLabel } from '@mui/material'
import Datetime from 'react-datetime'

import Widget from '@components/UI/Widget'
import Form from '@components/common/form'
import Input from '@components/UI/inputs/Input'
import Ckeditor from '@components/UI/Ckeditor'
import TagsInput from '@components/UI/TagsInput'
import LoadingWrapper from '@components/common/loading-wrapper'
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'

import 'react-datetime/css/react-datetime.css'

export default function GoalForm({
  onSubmit = () => {},
  habits = [],
  defaultValues = {},
  values = {}
}) {
  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm({
    defaultValues,
    values,
    mode: 'all'
  })

  return (
    <Widget>
      <Widget.Body>
        <Form onSubmit={handleSubmit(onSubmit)}>
          <LoadingWrapper loading={isSubmitting} displayChildren>
            <Input
              name='name'
              label='Nombre'
              placeholder='Escribe el nombre de la meta'
              control={control}
              rules={{ required: 'El nombre es requerido' }}
              error={errors.name?.message}
            />

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

            <Input
              type='number'
              name='value'
              label='Valor'
              placeholder='Define el valor de la meta'
              control={control}
              rules={{
                required: { value: true, message: 'El valor es requerido' },
                validate: {
                  positive: (value) =>
                    Number(value) > 0 || 'El valor mayor a cero',
                  max: (value) =>
                    Number(value) <= 100 ||
                    'El valor debe ser menor o igual a 100'
                }
              }}
              error={errors.value?.message}
            />

            <Controller
              name='skill_id'
              control={control}
              defaultValue={[]}
              render={({ field: { name, onChange } }) => (
                <>
                  <TagsInput
                    name={name}
                    label='Habitos'
                    onChange={onChange}
                    suggestions={habits}
                  />
                  {errors.skill_id && (
                    <FormErrorFeedback>
                      {errors.skill_id?.message}
                    </FormErrorFeedback>
                  )}
                </>
              )}
            />

            <Controller
              name='start_date'
              control={control}
              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'
                }
              }}
              render={({ field: { onChange, ref, value, name } }) => (
                <>
                  <InputLabel>Fecha de inicio</InputLabel>
                  <Datetime
                    dateFormat='DD-MM-YYYY'
                    onChange={(e) => onChange(e.format('YYYY-MM-DD'))}
                    timeFormat={false}
                    inputProps={{ className: 'form-control', ref, name }}
                    value={value}
                    closeOnSelect
                  />
                  {errors.start_date && (
                    <FormErrorFeedback>
                      {errors.start_date?.message}
                    </FormErrorFeedback>
                  )}
                </>
              )}
            />

            <Controller
              name='end_date'
              control={control}
              rules={{
                required: { value: true, message: 'La fecha es requerida' },
                validate: (value, { start_date }) =>
                  new Date(value) > new Date(start_date) ||
                  'La fecha debe ser mayor a la fecha de inicio'
              }}
              render={({ field: { onChange, name, ref, value } }) => (
                <>
                  <InputLabel>Fecha de finalización</InputLabel>
                  <Datetime
                    dateFormat='DD-MM-YYYY'
                    onChange={(e) => onChange(e.format('YYYY-MM-DD'))}
                    timeFormat={false}
                    inputProps={{ className: 'form-control', ref, name }}
                    value={value}
                    closeOnSelect
                  />
                  {errors.end_date && (
                    <FormErrorFeedback>
                      {errors.end_date?.message}
                    </FormErrorFeedback>
                  )}
                </>
              )}
            />

            <Button type='submit' color='primary'>
              Enviar
            </Button>
          </LoadingWrapper>
        </Form>
      </Widget.Body>
    </Widget>
  )
}