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 '@components/common/ckeditor/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