Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useForm } from 'react-hook-form'
import { Box } from '@mui/material'

import { getYears } from 'utils/dates'
import { useFetchHelper } from '@hooks'

import CKEditor from '@components/common/ckeditor/Ckeditor'
import Modal from '@app/components/UI/modal/Modal'
import Select from '@app/components/UI/inputs/Select'
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback'
import Input from '@app/components/UI/inputs/Input'
import SwitchInput from '@app/components/UI/SwitchInput'
import UbicationInput from '@app/components/UI/inputs/UbicationInput'

const EducationModal = ({
  show = false,
  currentEducation = null,
  onClose = () => {},
  onConfirm = () => {}
}) => {
  const { data: degrees } = useFetchHelper('degrees')
  const labels = useSelector(({ intl }) => intl.labels)

  const {
    control,
    formState: { errors },
    handleSubmit,
    setValue,
    register,
    watch,
    reset
  } = useForm({
    defaultValues: {
      university: '',
      degree_id: '',
      field_of_study: '',
      grade_or_percentage: '',
      formatted_address: '',
      is_current: 'n',
      from_year: '',
      to_year: '',
      description: ''
    },
    values: currentEducation
  })
  const isCurrent = watch('is_current', 'n') === 'y'

  const handleAddress = (address) => {
    Object.entries(address).forEach(([key, value]) => {
      if (value) {
        register(key)
        setValue(key, value)
      }
    })
  }

  const handleCloseModal = () => {
    reset()
    onClose()
  }

  const onSubmitHandler = handleSubmit((data) => onConfirm(data))

  useEffect(() => {
    register('formatted_address', { required: 'Este campo es requerido' })
    register('description', { required: 'Este campo es requerido' })
    register('is_current')
  }, [])

  useEffect(() => {
    if (!currentEducation) return
    const currentDegree = degrees.find(
      ({ name }) => name === currentEducation.degree
    )
    if (currentDegree) setValue('degree_id', currentDegree.value)
  }, [currentEducation, degrees])

  return (
    <Modal
      title={labels.education}
      show={show}
      onClose={handleCloseModal}
      onAccept={onSubmitHandler}
    >
      <Select
        name='degree_id'
        label={labels.degree}
        options={degrees}
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.degree_id?.message}
      />

      <Input
        name='university'
        label='Universidad'
        placeholder='Nombre de la universidad'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.university?.message}
      />

      <Input
        name='field_of_study'
        label='Campo de estudio'
        placeholder='Campo de estudio'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.field_of_study?.message}
      />

      <UbicationInput
        onGetAddress={handleAddress}
        error={errors.formatted_address?.message}
        placeholder='Ubicación'
      />
      {errors.formatted_address && (
        <FormErrorFeedback>
          {errors.formatted_address.message}
        </FormErrorFeedback>
      )}

      <Input
        name='grade_or_percentage'
        label='Grado o porcentaje'
        placeholder='Grado o porcentaje'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.grade_or_percentage?.message}
      />

      <Select
        name='from_year'
        control={control}
        label='Desde'
        placeholder={labels.from_year}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.from_year?.message}
        options={getYears().map((year) => ({ name: year, value: year }))}
      />

      {!isCurrent && (
        <Select
          name='to_year'
          control={control}
          label='Hasta'
          placeholder='Año hasta'
          rules={{ required: 'Este campo es requerido' }}
          error={errors.to_year?.message}
          options={getYears().map((year) => ({ name: year, value: year }))}
        />
      )}

      <label htmlFor='is_current'>{labels.education} Actual</label>
      <Box sx={{ display: 'block', mb: 1 }}>
        <SwitchInput
          isChecked={isCurrent}
          setValue={(val) => setValue('is_current', val ? 'y' : 'n')}
        />
      </Box>

      <CKEditor
        control={control}
        name='description'
        rules={{ required: 'Este campo es requerido' }}
        error={errors.description?.message}
      />
    </Modal>
  )
}

export default EducationModal