Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import EmptySection from '../../../../../../shared/empty-section/EmptySection'
import EducationCard from '../../../../../view/templates/linkedin/components/cards/EducationCard'
import ExperienceCard from '../../../../../view/templates/linkedin/components/cards/ExperienceCard'
import ItemsList from '../../../../../view/templates/linkedin/components/cards/ItemsList'
import ProfileCard from '../../../../../view/templates/linkedin/components/ProfileCard'
import ProfileWidget from '../../../../../view/templates/linkedin/components/ProfileWidget'
import AptitudesModal from '../../../aptitudes/AptitudesModal'
import EducationModal from '../../../educations/education/EducationModal'
import ExperienceModal from '../../../experiences/experience/ExperienceModal'
import HobbiesModal from '../../../hobbies-and-interests/HobbiesModal'
import LanguagesModal from '../../../languages/LanguagesModal'
import LocationModal from '../../../location/LocationModal'
import SkillsModal from '../../../skills/SkillsModal'

const EditView = (userInfo) => {
  const {
    userExperiences,
    userEducations,
    userLanguages,
    userSkills,
    userAptitudes,
    userHobbiesAndInterests,
    companySizesOptions,
    industriesOptions,
    months,
    degreesOptions,
    skillsOptions,
    languagesOptions,
    aptitudesOptions,
    hobbiesAndInterestsOptions,
    formatted_address
  } = userInfo

  const [experiences, setExperiences] = useState(userExperiences)
  const [educations, setEducations] = useState(userEducations)
  const [languages, setLanguages] = useState(userLanguages)
  const [skills, setSkills] = useState(userSkills)
  const [aptitudes, setAptitudes] = useState(userAptitudes)
  const [hobbiesAndInterests, setHobbiesAndInterests] = useState(userHobbiesAndInterests)
  const [address, setAddress] = useState(formatted_address)

  const [modalShow, setModalShow] = useState(null)
  const [settedDescription, setSettedDescription] = useState('')
  const [postUrl, setPostUrl] = useState('')
  const [isEdit, setIsEdit] = useState(false)

  const handleEdit = (modalName, url, description) => {
    setModalShow(modalName)
    setPostUrl(url)
    setSettedDescription(description)
  }

  const handleAdd = (modalName, url) => {
    setModalShow(modalName)
    setPostUrl(url)
  }

  const closeModal = () => {
    setSettedDescription('')
    setPostUrl('')
    setIsEdit(false)
    setModalShow(null)
  }

  const renderModal = {
    Experiencia: <ExperienceModal
            companySizesOptions={companySizesOptions}
            industriesOptions={industriesOptions}
            months={months}
            setUserExperiences={(newExperiences) => setExperiences(newExperiences)}
            show={modalShow === 'Experiencia'}
            postUrl={postUrl}
            closeModal={closeModal}
            settedDescription={settedDescription}
        />,
    Educación: <EducationModal
            closeModal={closeModal}
            postUrl={postUrl}
            setEducations={(newEducations) => setEducations(newEducations)}
            show={modalShow === 'Educación'}
            settedDescription={settedDescription}
            degreesOptions={degreesOptions}
        />,
    Habilidades: <SkillsModal
            closeModal={closeModal}
            setSkills={(newSkills) => setSkills(newSkills)}
            show={modalShow === 'Habilidades'}
            skillsOptions={skillsOptions}
            userIdEncrypted={userInfo.userProfileIdEncrypted}
            userSkillsArray={skills}
        />,
    Idiomas: <LanguagesModal
            show={modalShow === 'Idiomas'}
            closeModal={closeModal}
            userIdEncrypted={userInfo.userProfileIdEncrypted}
            languagesOptions={languagesOptions}
            userLanguages={languages}
            setLanguages={(newLanguages) => setLanguages(newLanguages)}
        />,
    Aptitudes: <AptitudesModal
            show={modalShow === 'Aptitudes'}
            closeModal={closeModal}
            userIdEncrypted={userInfo.userProfileIdEncrypted}
            aptitudesOptions={aptitudesOptions}
            userAptitudes={aptitudes}
            setAptitudes={(newAptitudes) => setAptitudes(newAptitudes)}
        />,
    'Hobbies e Intereses': <HobbiesModal
            show={modalShow === 'Hobbies e Intereses'}
            closeModal={closeModal}
            userIdEncrypted={userInfo.userProfileIdEncrypted}
            hobbiesAndInterestsOptions={hobbiesAndInterestsOptions}
            userHobbiesAndInterests={hobbiesAndInterests}
            setUserHobbiesAndInterests={(newHobbiesAndInterests) => setHobbiesAndInterests(newHobbiesAndInterests)}
        />,
    Ubicación: <LocationModal
            isModalOpen={modalShow === 'Ubicación'}
            closeModal={() => setModalShow(null)}
            setSettedAddress={(newAddress) => setAddress(newAddress)}
            userIdEncrypted={userInfo.userProfileIdEncrypted}
        />
  }

  return (
        <main className='w-100'>
            <div className='container'>
                <div className="main d-flex flex-column" style={{ gap: '.5rem' }}>
                    <ProfileCard {...{ ...userInfo, formatted_address: address }} />
                    <ProfileWidget
                        title='Experiencia'
                        onEdit={() => setIsEdit(!isEdit)}
                        onAdd={handleAdd}
                        addUrl={`/profile/my-profiles/experience/${userInfo.userProfileIdEncrypted}/operation/add`}
                    >
                        {experiences.map((experience, index) => {
                          return <ExperienceCard
                                key={index}
                                experience={experience}
                                months={userInfo.months}
                                isEdit={isEdit}
                                onEdit={handleEdit}
                                setExperiences={(newExperiences) => setExperiences(newExperiences)}
                            />
                        })}
                    </ProfileWidget>
                    <ProfileWidget
                        title='Educación'
                        onEdit={() => setIsEdit(!isEdit)}
                        onAdd={handleAdd}
                        addUrl={`/profile/my-profiles/education/${userInfo.userProfileIdEncrypted}/operation/add`}
                    >
                        {educations.map((education, index) => {
                          return <EducationCard
                                key={index}
                                education={education}
                                isEdit={isEdit}
                                onEdit={handleEdit}
                                setEducations={(newEducations) => setEducations(newEducations)}
                            />
                        })}
                    </ProfileWidget>
                    <ProfileWidget title='Ubicación' onEdit={() => setModalShow('Ubicación')} justEdit>
                        <div className='card__items'>
                            <p>{address}</p>
                        </div>
                    </ProfileWidget>
                    <ProfileWidget title='Idiomas' onEdit={() => setModalShow('Idiomas')} justEdit>
                        {!languages.length
                          ? <EmptySection align='left' message="Sin información" />
                          : <ItemsList value={languages} />
                        }
                    </ProfileWidget>
                    <ProfileWidget title='Habilidades' onEdit={() => setModalShow('Habilidades')} justEdit>
                        {!skills.length
                          ? <EmptySection align='left' message="Sin información" />
                          : <ItemsList value={skills} />
                        }
                    </ProfileWidget>
                    <ProfileWidget title='Aptitudes' onEdit={() => setModalShow('Aptitudes')} justEdit>
                        {!aptitudes.length
                          ? <EmptySection align='left' message="Sin información" />
                          : <ItemsList value={aptitudes} />
                        }
                    </ProfileWidget>
                    <ProfileWidget title='Pasatiempos e intereses' onEdit={() => setModalShow('Hobbies e Intereses')} justEdit>
                        {!hobbiesAndInterests.length
                          ? <EmptySection align='left' message="Sin información" />
                          : <ItemsList value={hobbiesAndInterests} />
                        }
                    </ProfileWidget>
                    {renderModal[modalShow]}
                </div>
            </div>
        </main >
  )
}

export default EditView