Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

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

import { Button, styled, Tab, Tabs } from '@mui/material'

import Widget from '@components/UI/Widget'

import Form from '@components/common/form'

import Input from '@components/UI/inputs/Input'

import TabPanel from '@components/common/tab-panel'

import Ckeditor from '@components/common/ckeditor/Ckeditor'

import DatetimePicker from '@components/common/inputs/datetime-picker'

import LoadingWrapper from '@components/common/loading-wrapper'

import TagsInput from '@components/UI/TagsInput'

import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'

const FormTabPanel = styled(TabPanel)(({ theme }) => ({

  display: 'flex',

  flexDirection: 'column',

  width: '100%',

  gap: theme.spacing(0.5)

}))

export default function GoalForm({

  onSubmit = () => {},

  habits = [],

  defaultValues = {},

  values = {}

}) {

  const [currentTab, setCurrentTab] = useState(0)

  const {

    control,

    handleSubmit,

    formState: { errors, isSubmitting },

    trigger

  } = useForm({

    defaultValues,

    values

  })

  const handleChange = async (event, newValue) => {

    const valid = await trigger()

    if (valid) setCurrentTab(newValue)

  }

  const nextStep = async () => {

    const valid = await trigger()

    if (valid) setCurrentTab(currentTab + 1)

  }

  return (

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

      <Tabs value={currentTab} onChange={handleChange}>

        <Tab label='Detalles' />

        <Tab label='Frecuencia' />

        <Tab label='Valor' />

      </Tabs>

      <Widget.Body>

        <Form onSubmit={handleSubmit(onSubmit)}>

          <LoadingWrapper loading={isSubmitting} displayChildren>

            <FormTabPanel value={0} index={currentTab}>

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

              />

              <Button color='primary' onClick={nextStep}>

                Continuar

              </Button>

            </FormTabPanel>

            <FormTabPanel value={1} index={currentTab}>

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

              />

              <Controller

                name='skill_id'

                control={control}

                defaultValue={[]}

                rules={{ required: 'Por favor selecciona un hábito' }}

                render={({

                  field: { onChange, value, name },

                  fieldState: { error }

                }) => (

                  <>

                    <TagsInput

                      label='Hábitos y competencias para lograr la Meta'

                      suggestions={habits}

                      onChange={onChange}

                      defaultValue={value}

                      name={name}

                    />

                    {error && (

                      <FormErrorFeedback>{error.message}</FormErrorFeedback>

                    )}

                  </>

                )}

              />

              <Button color='primary' onClick={nextStep}>

                Continuar

              </Button>

            </FormTabPanel>

            <FormTabPanel value={2} index={currentTab}>

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

            </FormTabPanel>

          </LoadingWrapper>

        </Form>

      </Widget.Body>

    </Widget>

  )

}