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