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

  })

  return (

    <Widget styles={{ overflow: 'visible' }}>

      <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 cuantitativo de la Meta a lograr'

              placeholder='Escribe el valor'

              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='Hábitos y competencias para lograr la Meta'

                    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>

  )

}