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 { data } = useFetch('/helpers/habits-and-skills/my', [])

  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 dataAdapter = ({

    monday_active,

    tuesday_active,

    wednesday_active,

    thursday_active,

    friday_active,

    saturday_active,

    sunday_active,

    notification_10min_before,

    notification_30min_before,

    ...habit

  }) => {

    onSubmit({

      monday_active: monday_active ? 1 : 0,

      tuesday_active: tuesday_active ? 1 : 0,

      wednesday_active: wednesday_active ? 1 : 0,

      thursday_active: thursday_active ? 1 : 0,

      friday_active: friday_active ? 1 : 0,

      saturday_active: saturday_active ? 1 : 0,

      sunday_active: sunday_active ? 1 : 0,

      notification_10min_before: notification_10min_before ? 1 : 0,

      notification_30min_before: notification_30min_before ? 1 : 0,

      ...habit

    })

  }

  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) => ({

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

                rules={{

                  validate: (value, formValues) => {

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

                      return 'Debe seleccionar al menos una opción'

                    }

                    if (value && formValues.notification_30min_before) {

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

                    }

                    return true

                  }

                }}

              />

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

                Enviar

              </Button>

            </FormTabPanel>

          </LoadingWrapper>

        </Form>

      </Widget.Body>

    </Widget>

  )

}