Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* eslint-disable indent */
/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import parse from 'html-react-parser'
import EditIcon from '@mui/icons-material/EditOutlined'
import { axios } from '../../../../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../../../redux/notification/notification.actions'
import { Modal } from 'react-bootstrap'
import ImageModal from '../../../../../shared/profile/edit/profile-info/profile-img/ImageModal'
import { profileTypes } from '../../../../../shared/profile/Profile.types'
import CoverModal from '../../../../../shared/profile/edit/cover-section/CoverModal'
import OverviewModal from '../../../../my-profiles/edit/overview/OverviewModal'
import ConfirmModal from '../../../../../shared/confirm-modal/ConfirmModal'

const ProfileCard = ({
    fullName = '',
    overview = '',
    formatted_address: formattedAddress = '',
    total_connections: totalConnections,
    showContact = false,
    userExperiences = [],
    linkInmail = '',
    CancelConnectionUrl = '',
    RequestConnectionUrl = '',
    image = '',
    cover = '',
    userIdEncrypted,
    userProfileIdEncrypted,
    follower,
    following,
    facebook,
    twitter,
    instagram,
    imageProfileCover,
    imageSizeCover,
    view_following,
    view_total_connections
}) => {
    const [isAdded, setIsAdded] = useState(!RequestConnectionUrl)
    const [connectionUrl, setConnectionUrl] = useState(RequestConnectionUrl || CancelConnectionUrl)
    const [isModalShow, setIsModalShow] = useState(false)
    const dispatch = useDispatch()
    const PATH = window.location.pathname

    // modals state
    const [modalToShow, setModalToShow] = useState(null)
    const [settedOverview, setSettedOverview] = useState(overview)
    const [profileImg, setProfileImg] = useState({
        path: `/storage/type/user-profile/code/${userIdEncrypted}/${image ? `filename/${image}` : ''}`
    })
    const [coverImg, setCoverImg] = useState({
        path: `/storage/type/user-cover/code/${userIdEncrypted}/${cover ? `filename/${cover}` : ''}`
    })

    const displayModal = () => setIsModalShow(!isModalShow)

    const getProfileData = async () => {
        try {
            const { data: response } = await axios.get(window.location.href)

            if (response.link_request) {
                return setConnectionUrl(response.link_request)
            }

            return setConnectionUrl(response.link_cancel)
        } catch (error) {
            console.log(error)
            return dispatch(addNotification({ style: 'danger', msg: 'Ha ocurrido un error' }))
        }
    }

    const connect = async () => {
        try {
            const { data: response } = await axios.post(connectionUrl)

            if (!response.success) {
                return dispatch(addNotification({ style: 'danger', msg: response.data }))
            }

            if (response.success && isModalShow) {
                displayModal()
            }

            await getProfileData()
            dispatch(addNotification({ style: 'success', msg: response.data }))
            setIsAdded(!isAdded)
        } catch (error) {
            dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }))
        }
    }

    const closeModal = () => setModalToShow(null)

    return (
        <>
            <section className='profile__user-card'>
                <div className='cover__image-container'>
                    <img alt='Background Image' src={coverImg.path} />
                    {PATH.includes('edit') &&
                        <button className='button-icon cover__edit-btn' onClick={() => setModalToShow('cover')}>
                            <EditIcon />
                        </button>
                    }
                </div>
                <section className='px-4 pb-4'>
                    <div className='card__image-options'>
                        <img
                            alt='Profile Image'
                            className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}
                            src={profileImg.path}
                            onClick={() => PATH.includes('edit') && setModalToShow('image')}
                        />
                        {PATH.includes('edit') &&
                            <button className='button-icon' onClick={() => setModalToShow('overview')}>
                                <EditIcon />
                            </button>
                        }
                    </div>
                    <div className='card-content'>
                        <div className='card-info'>
                            <h1>{fullName}</h1>
                            {parse(settedOverview.replaceAll('h1', 'p'))}
                            <div className='d-inline-flex align-items-center mt-2' style={{ gap: '1rem' }}>
                                <span>{formattedAddress}</span>
                                <a
                                    href=''
                                    onClick={(e) => {
                                        e.preventDefault()
                                        setModalToShow('info')
                                    }}>
                                    {LABELS.PERSONAL_INFO}
                                </a>
                            </div>
                            <div className='d-inline-flex align-items-center mt-2' style={{ gap: '1rem' }}>
                                {(Boolean(totalConnections) && view_total_connections) &&
                                    <a href='/connection/my-connections' target='_blank'>
                                        {`${totalConnections} ${LABELS.CONNECTIONS}`}
                                    </a>
                                }
                                {(Boolean(follower) && view_following) &&
                                    <a href='' className='cursor-auto' onClick={(e) => e.preventDefault()}>
                                        {`${follower} ${LABELS.FOLLOWERS}`}
                                    </a>
                                }
                                {(Boolean(following) && view_following) &&
                                    <a href='/company/following-companies' target='_blank'>
                                        {`${following} ${LABELS.FOLLOWING}`}
                                    </a>
                                }
                            </div>
                            <div className='button-actions mt-2'>
                                {(connectionUrl && isAdded) &&
                                    <button className='btn button btn-primary' onClick={() => displayModal()}>
                                        {LABELS.CANCEL}
                                    </button>
                                }
                                {(connectionUrl && !isAdded) &&
                                    <button className='btn button btn-primary' onClick={() => connect()}>
                                        {LABELS.CONNECT}
                                    </button>
                                }
                                {showContact &&
                                    <a href={linkInmail} className='btn button btn-secondary'>
                                        {LABELS.MESSAGE}
                                    </a>
                                }
                            </div>
                        </div>
                        <div className='card-experiences'>
                            <ul>
                                {userExperiences.map(({ company, title, industry, size }, index) =>
                                    <li key={index}>
                                        <span>{`${company} - ${title}`}</span>
                                        <p>{`${industry} / ${size}`}</p>
                                    </li>
                                )}
                            </ul>
                        </div>
                    </div>
                </section>
            </section>
            <OverviewModal
                isOpen={modalToShow === 'overview'}
                overview={settedOverview}
                userIdEncrypted={userProfileIdEncrypted}
                closeModal={() => closeModal()}
                setOverview={(newOverview) => setSettedOverview(newOverview)}
            />
            <CoverModal
                isModalOpen={modalToShow === 'cover'}
                coverType={profileTypes.USER}
                entityId={userIdEncrypted}
                profileId={userProfileIdEncrypted}
                handleCoverSectionModalOpen={() => closeModal()}
                imageSizeCover={imageSizeCover}
                setCoverImg={(newImage) => setCoverImg(newImage)}
            />
            <ImageModal
                handleModalOpen={() => closeModal()}
                isModalOpen={modalToShow === 'image'}
                profileId={userProfileIdEncrypted}
                imageProfileCover={imageProfileCover}
                profileType={profileTypes.USER}
                setProfileImg={(newImage) => setProfileImg(newImage)}
            />
            <ProfileCard.Modal
                show={modalToShow === 'info'}
                closeModal={() => closeModal()}
                fullName={fullName}
                facebook={facebook}
                twitter={twitter}
                instagram={instagram}
                following={following}
                formatted_address={formattedAddress}
                overview={overview}
                total_connections={totalConnections}
                follower={follower}
            />
            <ConfirmModal
                show={isModalShow}
                onClose={() => setIsModalShow(false)}
                onAccept={() => connect()}
            />
        </>
    )
}

const InfoModal = ({
    show,
    closeModal,
    facebook,
    following,
    formatted_address,
    fullName,
    instagram,
    overview,
    total_connections,
    twitter,
    follower
}) => {
    return (
        <Modal
            show={show}
            onHide={closeModal}
        >
            <Modal.Header closeButton>
                <h2>{LABELS.ABOUT_GROUP}</h2>
            </Modal.Header>
            <Modal.Body>
                <div className="description__label">
                    <label htmlFor="name">{LABELS.FIRST_NAME}</label>
                    <p>{fullName}</p>
                </div>
                {overview &&
                    <div className="description__label">
                        <label htmlFor="name">{LABELS.DESCRIPTION}</label>
                        {parse(overview)}
                    </div>
                }
                {formatted_address &&
                    <div className="description__label">
                        <label htmlFor="name">{LABELS.LOCATION}</label>
                        <p>{formatted_address}</p>
                    </div>
                }
                {total_connections &&
                    <div className="description__label">
                        <label htmlFor="name">{LABELS.CONNECTIONS}</label>
                        <p>{total_connections}</p>
                    </div>
                }
                {follower &&
                    <div className="description__label">
                        <label htmlFor="name">{LABELS.FOLLOWERS}</label>
                        <p>{follower}</p>
                    </div>
                }
                {following &&
                    <div className="description__label">
                        <label htmlFor="name">{LABELS.FOLLOWING}</label>
                        <p>{following}</p>
                    </div>
                }
                <div className="description__label">
                    <label htmlFor="name">{LABELS.SOCIAL_NETWORKS}</label>
                    {facebook &&
                        <a href={facebook} target="_blank" rel="noreferrer">
                            <p className='mb-1'>{facebook}</p>
                        </a>}
                    {instagram &&
                        <a href={instagram} target="_blank" rel="noreferrer">
                            <p className='mb-1'>{instagram}</p>
                        </a>}
                    {twitter &&
                        <a href={twitter} target="_blank" rel="noreferrer">
                            <p className='mb-1'>{twitter}</p>
                        </a>}
                </div>
            </Modal.Body>
        </Modal>
    )
}

ProfileCard.Modal = InfoModal

export default ProfileCard