Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { useForm } from 'react-hook-form';

import { useDispatch } from 'react-redux';

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

import { useFetch } from '@hooks';

import { getTemplate } from '@services/habits/habits';

import { INTELLIGENCES, WEEK_DAYS } from '@constants/habits';

import { addNotification } from '@store/notification/notification.actions';

import Row from '@components/common/Row';

import Form from '@components/common/form';

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

import Widget from '@components/UI/Widget';

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

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

import Select from '@components/UI/inputs/Select';

import CheckboxInput from '@components/UI/inputs/Checkbox';

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

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

  display: 'flex',

  flexDirection: 'column',

  width: '100%',

  gap: theme.spacing(0.5)

}));

export default function HabitForm({

  onSubmit = () => {},

  defaultValues = {

    name: '',

    description: '',

    monday_active: false,

    tuesday_active: false,

    wednesday_active: false,

    thursday_active: false,

    friday_active: false,

    saturday_active: false,

    sunday_active: false,

    monday_time: undefined,

    tuesday_time: undefined,

    wednesday_time: undefined,

    thursday_time: undefined,

    friday_time: undefined,

    saturday_time: undefined,

    sunday_time: undefined,

    quantitative_value: false,

    qualitative_description: '',

    notification_10min_before: false,

    notification_30min_before: false,

    intelligence: ''

  },

  values = {}

}) {

  const { data: templates } = useFetch('/helpers/habits-and-skills', []);

  const [currentTemplate, setCurrentTemplate] = useState(null);

  const [currentTab, setCurrentTab] = useState(0);

  const dispatch = useDispatch();

  const {

    handleSubmit,

    control,

    formState: { errors, isSubmitting },

    trigger

  } = useForm({

    defaultValues,

    values: currentTemplate ?? values

  });

  const getHabitTemplate = async (url) => {

    try {

      const response = await getTemplate(url);

      setCurrentTemplate(response);

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }));

    }

  };

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

  };

  const formatHabit = (habit) => {

    const dataArray = Object.entries(habit);

    const formatedData = dataArray.map(([key, value]) => {

      if (key.includes('active')) return [key, value ? 1 : 0];

      if (key.includes('time')) return [key, value.padEnd(8, ':00')];

      return [key, value];

    });

    return Object.fromEntries(formatedData);

  };

  const dataAdapter = (habit) => {

    const formatedHabit = formatHabit(habit);

    onSubmit(formatedHabit);

  };

  return (

    <Widget>

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

        <Tab label='Detalles' />

        <Tab label='Frecuencia' />

        <Tab label='Valor' />

        <Tab label='Notificaciones' />

      </Tabs>

      <Widget.Body>

        <Form onSubmit={handleSubmit(dataAdapter)}>

          <LoadingWrapper loading={isSubmitting} displayChildren>

            {/* Detalles */}

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

              <Select

                label='Plantilla:'

                options={templates.map((template) => ({

                  label: template.name,

                  value: template.link

                }))}

                onChange={(e) => getHabitTemplate(e.target.value)}

              />

              <Input

                label='Nombre del hábito o competencia:'

                name='name'

                placeholder='Escribe el nombre del hábito o competencia'

                control={control}

                rules={{ required: 'El nombre es requerido' }}

                error={errors.name?.message}

              />

              <Select

                label='Inteligencias:'

                name='intelligence'

                options={INTELLIGENCES}

                control={control}

                rules={{ required: 'Este campo es requerido' }}

                error={errors.intelligence?.message}

              />

              <Ckeditor

                control={control}

                name='description'

                error={errors.description?.message}

                rules={{ required: 'La descripción es requerida' }}

                label='Descripción:'

              />

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

                Continuar

              </Button>

            </FormTabPanel>

            {/* Frecuencia */}

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

              {WEEK_DAYS.map(({ label, value, time }) => {

                return (

                  <Row

                    key={value}

                    styles={{

                      flexFlow: 'nowrap',

                      justifyContent: 'space-between'

                    }}

                  >

                    {/* Campos de días activos */}

                    <CheckboxInput label={label} control={control} name={value} />

                    {/* Puedes repetir los campos de días activos y sus horas para cada día de la semana */}

                    <Input

                      type='time'

                      control={control}

                      name={time}

                      rules={{

                        validate: (time, formValues) => {

                          if (!formValues[value]) return true;

                          if (formValues[value] && time) return true;

                          return 'La hora es requerida si el día está activo';

                        }

                      }}

                      style={{ width: 'auto' }}

                      error={errors[time]?.message}

                    />

                  </Row>

                );

              })}

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

                Continuar

              </Button>

            </FormTabPanel>

            {/* Valor */}

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

              <Input

                control={control}

                label='Valor cuantitativo:'

                name='quantitative_value'

                type='number'

                rules={{ required: 'El valor es requerido' }}

                error={errors.quantitative_value?.message}

              />

              <Ckeditor

                control={control}

                name='qualitative_description'

                error={errors.qualitative_description?.message}

                rules={{ required: 'La descripción es requerida' }}

                label='Descripción cualitativa:'

              />

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

                Continuar

              </Button>

            </FormTabPanel>

            {/* Notificaciones */}

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

              <CheckboxInput

                label='Notificación 10 min antes'

                name='notification_10min_before'

                control={control}

              />

              <CheckboxInput

                label='Notificación 30 min antes'

                name='notification_30min_before'

                control={control}

                rules={{

                  validate: (value, formValues) => {

                    if (!value && !formValues.notification_10min_before) {

                      return 'Debe seleccionar al menos una opción';

                    }

                    if (value && formValues.notification_10min_before) {

                      return 'No se puede seleccionar ambas opciones simultáneamente';

                    }

                    return true;

                  }

                }}

              />

              <Button color='primary' type='submit' disabled={isSubmitting}>

                Crear

              </Button>

            </FormTabPanel>

          </LoadingWrapper>

        </Form>

      </Widget.Body>

    </Widget>

  );

}