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