Proyectos de Subversion LeadersLinked - SPA

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

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 { useFetch } from '@hooks'

export default function GoalForm({
  onSubmit = () => {},
  defaultValues = {},
  values = {}
}) {
  const context = useOutletContext()
  const {
    data: { items: habits }
  } = useFetch(context.link_skills, { items: [] })

  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm({
    defaultValues,
    values
  })

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <LoadingWrapper loading={isSubmitting}>
        <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: 'El valor es requerido',
            min: { value: 1, message: 'El valor debe ser mayor a 1' },
            max: { value: 100, message: 'El valor debe ser menor a 100' }
          }}
          error={errors.value?.message}
        />

        <Controller
          name='skill_id'
          control={control}
          defaultValue={[]}
          rules={{ required: 'Selecciona al menos un hábito' }}
          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: 'La fecha es requerida',
            validate: {
              beGreaterThanToday: (value) =>
                new Date(value) > new Date() ||
                'La fecha debe ser mayor a la fecha actual'
            }
          }}
          render={({ field: { onChange } }) => (
            <>
              <InputLabel>Fecha de inicio</InputLabel>
              <Datetime
                dateFormat='DD-MM-YYYY'
                onChange={(e) => onChange(e.format('YYYY-MM-DD'))}
                timeFormat={false}
                inputProps={{ className: 'form-control' }}
                closeOnSelect
              />
              {errors.start_date && (
                <FormErrorFeedback>
                  {errors.start_date?.message}
                </FormErrorFeedback>
              )}
            </>
          )}
        />
        <Controller
          name='end_date'
          control={control}
          rules={{
            required: 'La fecha es requerida',
            validate: {
              beGreaterThanStartDate: (value, { start_date }) =>
                new Date(value) > new Date(start_date) ||
                'La fecha debe ser mayor a la fecha de inicio'
            }
          }}
          render={({ field: { onChange } }) => (
            <>
              <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' }}
                closeOnSelect
              />
              {errors.end_date && (
                <FormErrorFeedback>
                  {errors.end_date?.message}
                </FormErrorFeedback>
              )}
            </>
          )}
        />

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