Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useForm } from 'react-hook-form'
import { Button } from '@mui/material'

import Widget from '@components/UI/Widget'
import Form from '@components/common/form'
import Input from '@components/UI/inputs/Input'
import Select from '@components/UI/inputs/Select'
import Ckeditor from '@components/common/ckeditor/Ckeditor'
import DatetimePicker from '@components/common/inputs/datetime-picker'
import LoadingWrapper from '@components/common/loading-wrapper'

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'
                }
              }}
              error={errors.value?.message}
            />

            <Select
              label='Hábitos y competencias para lograr la Meta'
              name='skill_id'
              control={control}
              options={habits}
              defaultValue={[]}
              rules={{ required: 'Por favor selecciona un hábito' }}
              error={errors.skill_id?.message}
              multiple
            />

            <DatetimePicker
              label='Fecha de inicio'
              name='start_date'
              control={control}
              rules={{
                required: { value: true, message: 'La fecha es requerida' },
                validate: {
                  beEqualOrGreaterThanToday: (date) => {
                    const selectedDate = new Date(date + 'T00:00:00')
                    const selectedDateMs = selectedDate.getTime()
                    const todayMs = new Date().setHours(0, 0, 0, 0)

                    return (
                      selectedDateMs >= todayMs ||
                      'La fecha debe ser mayor o igual a hoy'
                    )
                  }
                }
              }}
            />

            <DatetimePicker
              label='Fecha de finalización'
              name='end_date'
              control={control}
              rules={{
                required: { value: true, message: 'La fecha es requerida' },
                validate: (value, { start_date }) => {
                  const startDate = new Date(start_date + 'T00:00:00')
                  const endDate = new Date(value + 'T00:00:00')
                  const startDateMs = startDate.getTime()
                  const endDateMs = endDate.getTime()

                  return (
                    endDateMs > startDateMs ||
                    'La fecha debe ser mayor a la fecha de inicio'
                  )
                }
              }}
            />

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