Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

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

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

import Datetime from 'react-datetime'

import {

  CREATE_OPTIONS,

  FREQUENCYS,

  INTELLIGENCES,

  WEEK_DAYS

} from '@constants/habits'

import Form from '@components/common/form'

import Widget from '@components/UI/Widget'

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

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

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

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

import Ckeditor from '@components/UI/Ckeditor'

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

import SwitchInput from '@components/UI/SwitchInput'

export default function HabitForm({

  onSubmit = () => {},

  defaultValues = {

    name: '',

    description: '',

    monday_active: '0',

    tuesday_active: '0',

    wednesday_active: '0',

    thursday_active: '0',

    friday_active: '0',

    saturday_active: '0',

    sunday_active: '0',

    monday_time: '06:00',

    tuesday_time: '07:00',

    wednesday_time: '08:00',

    thursday_time: '09:00',

    friday_time: '10:00',

    saturday_time: '11:00',

    sunday_time: '12:00',

    quantitative_value: '0',

    qualitative_description: 'hora',

    notification_10min_before: '0',

    notification_30min_before: '0',

    intelligence: 'physical'

  },

  values = {}

}) {

  const [currentTab, setCurrentTab] = useState(0)

  const handleChange = (event, newValue) => setCurrentTab(newValue)

  const {

    control,

    formState: { errors, isSubmitting },

    watch,

    setValue,

    handleSubmit

  } = useForm({

    defaultValues,

    values

  })

  const watchedInderminate = watch('indeterminate')

  return (

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

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

        {CREATE_OPTIONS.map(({ label, value }) => (

          <Tab

            key={value}

            label={label}

            id={`simple-tab-${value}`}

            aria-controls={`simple-tabpanel-${value}`}

            value={value}

          />

        ))}

      </Tabs>

      <Widget.Body>

        <Form onSubmit={handleSubmit(onSubmit)}>

          <LoadingWrapper loading={isSubmitting} displayChildren>

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

              <Select

                name='intelligence'

                label='Inteligencia'

                options={INTELLIGENCES}

                control={control}

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

                error={errors.intelligence?.message}

              />

              <Input

                name='title'

                label='Titulo'

                placeholder='Define el título de tu hábito'

                control={control}

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

                error={errors.title?.message}

              />

              <Ckeditor

                name='description'

                label='Descripción'

                control={control}

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

                error={errors.description?.message}

              />

              <Input

                type='number'

                name='value'

                label='Valor'

                placeholder='Define un valor a hábito'

                control={control}

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

                error={errors.value?.message}

              />

              <Input

                label='Metodo'

                control={control}

                name='method'

                type='file'

              />

              <Button color='primary'>Continuar</Button>

            </TabPanel>

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

              <Select

                name='frequency'

                label='Frecuencia'

                options={FREQUENCYS}

                control={control}

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

                error={errors.frequency?.message}

              />

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

                <Box

                  key={value}

                  sx={{

                    display: 'flex',

                    justifyContent: 'space-between',

                    gap: '1rem'

                  }}

                >

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

                  <Controller

                    name={time}

                    control={control}

                    rules={{

                      validate: (val, formValues) => {

                        return (

                          (formValues[value] && val) ||

                          'Debes seleccionar una hora'

                        )

                      }

                    }}

                    render={({ field: { onChange, disabled } }) => (

                      <Datetime

                        dateFormat={false}

                        timeFormat={true}

                        onChange={(e) => {

                          const hour = new Date(e.toDate()).getHours()

                          const minute = new Date(e.toDate()).getMinutes()

                          const time = `${hour}:${minute}`

                          onChange(time)

                        }}

                        inputProps={{

                          className: 'form-control custom-picker',

                          disabled

                        }}

                        closeOnSelect

                      />

                    )}

                  />

                </Box>

              ))}

              <InputLabel>Fecha limite</InputLabel>

              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>

                <SwitchInput

                  label='Indeterminado'

                  setValue={(val) => setValue('indeterminate', val)}

                  isChecked={watchedInderminate}

                />

                {!watchedInderminate && (

                  <>

                    <Datetime

                      dateFormat='DD-MM-YYYY'

                      timeFormat={false}

                      inputProps={{ className: 'form-control custom-picker' }}

                      initialValue={Date.parse(new Date())}

                      closeOnSelect

                    />

                  </>

                )}

              </Box>

              <Button color='primary'>Continuar</Button>

            </TabPanel>

          </LoadingWrapper>

        </Form>

      </Widget.Body>

    </Widget>

  )

}