Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
import React, { useRef, useState } from 'react'
import { addNotification } from '../redux/notification/notification.actions'
import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'
import Spinner from '../shared/loading-spinner/Spinner'
import { axios } from '../utils'
import styled from 'styled-components'
import { useSelector } from 'react-redux'

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`
const Profile = ({
  image,
  name,
  email,
  network,
  status,
  fetchCallback,
  isTopData = false,
  btnAcceptTitle = 'Ver perfil',
  btnCancelTitle = 'Borrar perfil',
  btnEditTitle = 'Editar perfil',
  btnLeaveTitle = 'Editar perfil',
  link_view,
  link_edit,
  link_delete,
  link_cancel,
  link_block,
  link_reject,
  link_accept,
  link_inmail,
  link_request,
  link_unblock,
  link_unfollow,
  link_approve,
  link_leave,
  link_admin,
  link_impersonate,
}) => {
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
  const [loading, setLoading] = useState(false)
  const confirmUrl = useRef('')
  const labels = useSelector((state) => state.labels)

  const handleConfirm = (url = '') => {
    setIsShowConfirmation(!isShowConfirmation)
    confirmUrl.current = url
  }

  const getImpersonateUrl = async (url = '') => {
    try {
      const { data } = await axios.get(url)
      if (data.success) window.location.href = data.data
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  const onConfirm = (url) => {
    setLoading(true)
    axios
      .post(url)
      .then(({ data }) => {
        if (!data.success) {
          const errorMsg =
            typeof data.data === 'string'
              ? data.data
              : 'Ha ocurrido un error, Por favor intente más tarde'
          addNotification({
            style: 'danger',
            msg: errorMsg,
          })
        }
        const msg = data.data
        addNotification({ style: 'success', msg })
        if (fetchCallback) fetchCallback()
      })
      .catch((error) => console.log('>>: error > ', error))
      .finally(() => {
        confirmUrl.current = ''
        setLoading(false)
      })
  }

  const handleUnfollow = async (link_unfollow) => {
    setLoading(true)
    await axios.post(link_unfollow).then(({ data }) => {
      if (data.success) fetchCallback()

      typeof data.data === 'string' &&
        addNotification({
          style: 'danger',
          msg: data.data,
        })
    })
    setLoading(false)
  }

  const getManageUrl = async () => {
    try {
      const { data } = await axios.get(link_admin)
      if (data.success) window.open(data.data, '_backend')
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  const linksOptions = [
    { label: btnAcceptTitle, url: link_view, color: 'primary' },
    { label: btnEditTitle, url: link_edit, color: 'secondary' },
    { label: labels.APPROVE, url: link_approve, color: 'tertiary' },
    { label: labels.ACCEPT, url: link_accept, color: 'tertiary' },
    { label: labels.REJECT, url: link_reject, color: 'tertiary' },
    { label: btnCancelTitle, url: link_delete, color: 'tertiary' },
    { label: labels.MESSAGE, url: link_inmail, color: 'secondary' },
    { label: labels.ADMINISTRATE, url: link_admin, color: 'secondary' },
    { label: labels.UNFOLLOW, url: link_unfollow, color: 'tertiary' },
    { label: labels.BLOCK, url: link_block, color: 'tertiary' },
    { label: labels.UNBLOCK, url: link_unblock, color: 'tertiary' },
    { label: labels.CONNECT, url: link_request, color: 'tertiary' },
    { label: labels.CANCEL, url: link_cancel, color: 'tertiary' },
    { label: labels.LEAVE, url: link_leave, color: 'tertiary' },
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },
  ]

  return (
    <div className="profile_info">
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
        {image && (
          <div className="profile_info_header_imgContainer">
            <img
              src={image}
              className="object-fit-contain"
              style={{ maxHeight: '100px' }}
              alt="group image"
            />
          </div>
        )}
        <div
          className={`${
            image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'
          } ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}
        >
          <h3
            className={`${status ? '' : 'w-100 text-left'} ${
              isTopData ? 'mb-2' : ''
            } w-100`}
          >
            {name}
          </h3>
          {isTopData && email && (
            <h4
              className={`${status ? '' : 'w-100 text-left'} ${
                isTopData ? 'mb-2' : ''
              } w-100`}
            >
              {email}
            </h4>
          )}
          {network && (
            <h4
              className={`${status ? '' : 'w-100 text-left'} ${
                isTopData ? 'mb-2' : ''
              } w-100`}
            >
              {network}
            </h4>
          )}
          {isTopData && (
            <ul>
              {link_view && (
                <li>
                  <a
                    href={link_view}
                    data-link={link_view}
                    className="btn btn-secondary ellipsis"
                  >
                    {btnAcceptTitle}
                  </a>
                </li>
              )}
              {link_inmail && (
                <li>
                  <a
                    href={link_inmail}
                    data-link={link_inmail}
                    className="btn btn-primary"
                  >
                    {labels.MESSAGE}
                  </a>
                </li>
              )}
            </ul>
          )}
        </div>
        {status && (
          <h4
            className={`col-sm-12 d-flex justify-content-center align-items-center ${
              !image ? 'position-relative' : ''
            }`}
          >
            {status}
          </h4>
        )}
      </div>
      <hr />
      <ul className="position-relative">
        {linksOptions.map((option) => {
          const breakOptions = [link_view, link_edit, link_inmail]

          if (!option.url) {
            return null
          }

          if (option.url === link_view && isTopData) {
            return null
          }

          if (option.url === link_inmail && isTopData) {
            return null
          }

          return (
            <a
              key={option.label}
              href={option.url}
              title={option.label}
              className={`btn btn-${option.color} position-relative`}
              onClick={(e) => {
                if (!breakOptions.includes(option.url)) {
                  e.preventDefault()
                  handleConfirm(option.url)
                }

                if (option.url === link_unfollow) {
                  e.preventDefault()
                  handleUnfollow(option.url)
                }
                if (option.url === link_admin) {
                  e.preventDefault()
                  getManageUrl()
                }

                if (option.url === link_impersonate) {
                  e.preventDefault()
                  getImpersonateUrl(option.url)
                }
              }}
            >
              {option.label}
            </a>
          )
        })}
        <ConfirmationBox
          show={isShowConfirmation}
          onClose={() => handleConfirm()}
          onAccept={() => onConfirm(confirmUrl.current)}
        />
      </ul>
      {loading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
    </div>
  )
}

export default Profile