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