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='Valor' />

        <Tab label='Fecha' />

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

  );

}