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 '@app/components/UI/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 watchAddress = watch('formatted_address')

  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'

        settedQuery={watchAddress}

      />

      {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