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>

  )

}