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 { getMonths, getYears } from '@app/utils/dates'
import { useFetchHelper } from '@hooks'

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

const ExperienceModal = ({
  show = false,
  onClose = () => {},
  onConfirm = () => {},
  currentExperience = null
}) => {
  const { data: companySizes } = useFetchHelper('company-sizes')
  const { data: industries } = useFetchHelper('industries')
  const labels = useSelector(({ intl }) => intl.labels)

  const {
    register,
    handleSubmit,
    setValue,
    control,
    watch,
    reset,
    formState: { errors }
  } = useForm({
    defaultValues: {
      company: '',
      description: '',
      from_month: '',
      from_year: '',
      industry_id: '',
      is_current: 'n',
      company_size_id: '',
      title: '',
      to_month: '',
      to_year: ''
    }
  })
  const isCurrent = watch('is_current', 'n') === 'y'

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

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

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

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

  useEffect(() => {
    if (!currentExperience) return

    const {
      company,
      description,
      from_month,
      from_year,
      industry,
      is_current,
      size,
      title,
      to_month,
      to_year
    } = currentExperience

    setValue('company', company)
    setValue('description', description)
    setValue('from_month', from_month)
    setValue('from_year', from_year)
    setValue('is_current', is_current)
    setValue('title', title)
    setValue('to_month', to_month)
    setValue('to_year', to_year)

    const currentSize = companySizes.find(({ name }) => size.includes(name))
    const currentIndustry = industries.find(({ name }) => name === industry)

    if (currentSize) {
      setValue('company_size_id', currentSize.value)
    }
    if (currentIndustry) {
      setValue('industry_id', currentIndustry.value)
    }
  }, [currentExperience, companySizes, industries])

  useEffect(() => {
    if (isCurrent) {
      setValue('to_month', '')
      setValue('to_year', '')
    }
  }, [isCurrent])

  return (
    <Modal
      title={`${currentExperience ? labels.edit : labels.add} - ${
        labels.experience
      }`}
      show={show}
      onClose={handleClose}
      onAccept={onSubmit}
    >
      <Input
        name='company'
        placeholder='Empresa'
        error={errors.company?.message}
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        label='Empresa'
      />

      <Select
        name='industry_id'
        error={errors.industry_id?.message}
        options={industries}
        placeholder='Industria'
        label='Industria'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
      />

      <Select
        name='company_size_id'
        error={errors.company_size_id?.message}
        options={companySizes}
        placeholder='Tamaño de la Empresa'
        label='Tamaño de la Empresa'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
      />

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

      <UbicationInput
        onGetAddress={addressHandler}
        error={errors.formatted_address?.message}
        placeholder='Ubicación'
      />

      <Box sx={{ display: 'flex', gap: 1 }}>
        <Select
          name='from_month'
          error={errors.from_month?.message}
          label='Desde'
          placeholder='Mes desde'
          options={getMonths().map((month, i) => ({
            name: month,
            value: i + 1
          }))}
          control={control}
          rules={{ required: 'Este campo es requerido' }}
        />

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

      {!isCurrent && (
        <Box sx={{ display: 'flex', gap: 1 }}>
          <Select
            error={errors.to_month?.message}
            options={getMonths().map((month, i) => ({
              name: month,
              value: i + 1
            }))}
            placeholder='Mes hasta'
            label='Hasta'
            name='to_month'
            rules={{
              required: isCurrent ? false : 'Este campo es requerido',
              validate: (value) => {
                const currentMonth = new Date().getMonth() + 1
                const currentYear = new Date().getFullYear()
                const toYear = watch('to_year')

                return (
                  (toYear === currentYear && value < currentMonth) ||
                  'La fecha no puede ser superior a la actual'
                )
              }
            }}
            control={control}
          />

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

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

      <CKEditor
        defaultValue={currentExperience?.description ?? ''}
        onChange={(value) => setValue('description', value)}
      />
      {errors.description && (
        <FormErrorFeedback>Este campo es requerido</FormErrorFeedback>
      )}
    </Modal>
  )
}

export default ExperienceModal