Proyectos de Subversion LeadersLinked - Antes de SPA

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

const EditView = (userInfo) => {
  const {
    experiences: userExperiences,
    educations: userEducations,
    languages: userLanguages,
    skills: userSkills,
    aptitudes: userAptitudes,
    hobbiesAndInterests: userHobbiesAndInterests,
    months,
    options,
    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={options.companySizes}
        industriesOptions={options.industries}
        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={options.degrees}
      />
    ),
    Habilidades: (
      <SkillsModal
        closeModal={closeModal}
        setSkills={(newSkills) => setSkills(newSkills)}
        show={modalShow === 'Habilidades'}
        skillsOptions={options.skills}
        userIdEncrypted={userInfo.profileId}
        userSkillsArray={skills}
      />
    ),
    Idiomas: (
      <LanguagesModal
        show={modalShow === 'Idiomas'}
        closeModal={closeModal}
        userIdEncrypted={userInfo.profileId}
        languagesOptions={options.languages}
        userLanguages={languages}
        setLanguages={(newLanguages) => setLanguages(newLanguages)}
      />
    ),
    Aptitudes: (
      <AptitudesModal
        show={modalShow === 'Aptitudes'}
        closeModal={closeModal}
        userIdEncrypted={userInfo.profileId}
        aptitudesOptions={options.aptitudes}
        userAptitudes={aptitudes}
        setAptitudes={(newAptitudes) => setAptitudes(newAptitudes)}
      />
    ),
    'Hobbies e Intereses': (
      <HobbiesModal
        show={modalShow === 'Hobbies e Intereses'}
        closeModal={closeModal}
        userIdEncrypted={userInfo.profileId}
        hobbiesAndInterestsOptions={options.hobbiesAndInterests}
        userHobbiesAndInterests={hobbiesAndInterests}
        setUserHobbiesAndInterests={(newHobbiesAndInterests) =>
          setHobbiesAndInterests(newHobbiesAndInterests)
        }
      />
    ),
    Ubicación: (
      <LocationModal
        isModalOpen={modalShow === 'Ubicación'}
        closeModal={() => setModalShow(null)}
        setSettedAddress={(newAddress) => setAddress(newAddress)}
        userIdEncrypted={userInfo.profileId}
      />
    ),
  }

  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.profileId}/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.profileId}/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