Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import { axios } from '../../../../../utils'
import { addNotification } from '../../../../../redux/notification/notification.actions'
import Avatar from '../../../../../shared/Avatar/Avatar'
import { useDispatch } from 'react-redux'
import CoverModal from '../../../../../shared/profile/edit/cover-section/CoverModal'
import ImageModal from '../../../../../shared/profile/edit/profile-info/profile-img/ImageModal'
import { profileTypes } from '../../../../../shared/profile/Profile.types'
import EditIcon from '@mui/icons-material/EditOutlined'

const GroupActions = ({ cover, groupId, name, image, groupType, linkInmail, actionLinks, accessibility, imageProfileCover, imageSizeCover }) => {
    const [modalToShow, setModalToShow] = useState(null)
    const [coverImg, setCoverImg] = useState({ path: `/storage/type/group-cover/code/${groupId}/${cover ? `filename/${cover}` : ""}` })
    const [profileImg, setProfileImg] = useState({ path: `/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}` })
    const dispatch = useDispatch();
    const PATH = window.location.pathname

    const closeModal = () => setModalToShow(null)

    const handleActionLink = (url) => {
        axios.post(url)
            .then(({ data }) => {
                if (!data.success) {
                    return dispatch(addNotification({ style: 'error', msg: data.data }))
                }
                addNotification({ style: 'success', msg: data.data })
                window.location.reload()
            })
            .catch(err => console.log('>>: err > ', err))
    }

    return (
        <>
            <div className="group__actions">
                <div className="group__actions-cover position-relative" style={{height: '300px'}}>
                    <img src={coverImg.path} alt='Profile cover' className='sidebar__cover' />
                    {PATH.includes('edit') &&
                        <button className='button-icon cover__edit-btn' onClick={() => setModalToShow('cover')}>
                            <EditIcon />
                        </button>
                    }
                </div>
                <div className="group__actions-body">
                    <div className='card__image-options'>
                        {PATH.includes('edit')
                            ? <img
                                alt='Profile Image'
                                className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}
                                src={profileImg.path}
                                onClick={() => PATH.includes('edit') && setModalToShow('image')}
                                style={{ zIndex: 10 }}
                            />
                            : <Avatar imageUrl={profileImg.path} size='xl' name={name} />
                        }
                    </div>
                    <h1>{name}</h1>
                    <span>{groupType}</span>
                    <div className="row" style={{ gap: '.5rem' }}>
                        {linkInmail &&
                            <a href={linkInmail} className="button btn btn-primary">
                                Contactar con el Administrador
                            </a>
                        }
                        {actionLinks?.link_accept &&
                            <button
                                onClick={() => handleActionLink(actionLinks?.link_accept)}
                                className="button btn btn-primary"
                            >
                                Aceptar invitacion
                            </button>
                        }
                        {actionLinks?.link_cancel &&
                            <button
                                onClick={() => handleActionLink(actionLinks?.link_cancel)}
                                className="button btn btn-secondary"
                            >
                                Cancelar invitacion
                            </button>
                        }
                        {actionLinks?.link_leave &&
                            <button
                                onClick={() => handleActionLink(actionLinks?.link_leave)}
                                className="button btn btn-secondary"
                            >
                                Abandonar grupo
                            </button>
                        }
                        {actionLinks?.link_request &&
                            <button
                                onClick={() => handleActionLink(actionLinks?.link_request)}
                                className="button btn btn-primary"
                            >
                                {accessibility === 'Auto unirse' ? 'Unirse' : 'Solicitar membresia'}
                            </button>
                        }
                    </div>
                </div>
            </div>
            <CoverModal
                isModalOpen={modalToShow === 'cover'}
                coverType={profileTypes.GROUP}
                groupId={groupId}
                handleCoverSectionModalOpen={() => closeModal()}
                imageSizeCover={imageSizeCover}
                setCoverImg={(newImage) => setCoverImg(newImage)}
            />
            <ImageModal
                handleModalOpen={() => closeModal()}
                isModalOpen={modalToShow === 'image'}
                groupId={groupId}
                imageProfileCover={imageProfileCover}
                profileType={profileTypes.GROUP}
                setProfileImg={(newImage) => setProfileImg(newImage)}
            />
        </>
    )
}

export default GroupActions