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 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'

export default function GoalForm({

  onSubmit = () => {},

  habits = [],

  defaultValues = {},

  values = {}

}) {

  const {

    control,

    handleSubmit,

    formState: { errors, isSubmitting }

  } = useForm({

    defaultValues: {

      start_date: new Date()

    },

    values,

    mode: 'all'

  })

  return (

    <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}

          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>

  )

}