Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { Controller, useForm } from 'react-hook-form'

import { Button } 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 = () => {},

  defaultValues = {},

  values = {}

}) {

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

          error={errors.value?.message}

        />

        <Controller

          name='skill_id'

          control={control}

          defaultValue={[]}

          // rules={{ required: 'La habilidad es requerida' }}

          render={({ field: { name, onChange } }) => (

            <>

              <TagsInput

                name={name}

                label='Habitos'

                onChange={onChange}

                suggestions={values.skills}

              />

              {errors.skill_id && (

                <FormErrorFeedback>

                  {errors.skill_id?.message}

                </FormErrorFeedback>

              )}

            </>

          )}

        />

        <Controller

          name='start_date'

          control={control}

          defaultValue={Date.now()}

          // rules={{ required: 'La fecha es requerida' }}

          render={({ field: { onChange, value } }) => (

            <Datetime

              dateFormat='DD-MM-YYYY'

              onChange={(e) => onChange(e.toString())}

              timeFormat={false}

              inputProps={{ className: 'form-control' }}

              initialValue={value}

              closeOnSelect

            />

          )}

        />

        <Button type='submit' color='primary'>

          Enviar

        </Button>

      </LoadingWrapper>

    </Form>

  )

}