Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
import React, { 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,
  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,
  fetchCallback,
  isTopData = false,
  btnAcceptTitle = 'Ver perfil',
  btnCancelTitle = 'Borrar perfil',
  btnEditTitle = 'Editar perfil',
}) => {
  const [showConfirmationBox, setShowConfirmationBox] = useState(false)
  const [showCancelConfirmationBox, setShowCancelConfirmationBox] =
    useState(false)
  const [showBlockConfirmationBox, setShowBlockConfirmationBox] =
    useState(false)
  const [showRejectConfirmationBox, setShowRejectConfirmationBox] =
    useState(false)
  const [showApproveConfirmationBox, setShowApproveConfirmationBox] =
    useState(false)
  const [showRequestConfirmationBox, setShowRequestConfirmationBox] =
    useState(false)
  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] =
    useState(false)
  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] =
    useState(false)
  const [loading, setLoading] = useState(false)
  const labels = useSelector((state) => state.labels)

  const handleShowConfirmationBox = (show = !showConfirmationBox) => {
    setShowConfirmationBox(show)
  }
  const handleCancelConfirmationBox = (show = !showConfirmationBox) => {
    setShowCancelConfirmationBox(show)
  }
  const handleBlockConfirmationBox = (show = !showConfirmationBox) => {
    setShowBlockConfirmationBox(show)
  }
  const handleRejectConfirmationBox = (show = !showConfirmationBox) => {
    setShowRejectConfirmationBox(show)
  }
  const handleApproveConfirmationBox = (show = !showConfirmationBox) => {
    setShowApproveConfirmationBox(show)
  }
  const handleRequestConfirmationBox = (show = !showConfirmationBox) => {
    setShowRequestConfirmationBox(show)
  }
  const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {
    setShowUnblockConfirmationBox(show)
  }
  const handleLeaveConfirmationBox = (show = !showConfirmationBox) => {
    setShowLeaveConfirmationBox(show)
  }

  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 handleCancelApply = (url = link_delete) => {
    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(() => 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)
    }
  }

  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>
        {link_view && !isTopData && (
          <li>
            <a
              href={link_view}
              data-link={link_view}
              title=""
              className="btn btn-primary"
            >
              {btnAcceptTitle}
            </a>
          </li>
        )}
        {link_edit && (
          <li>
            <a
              href={link_edit}
              data-link={link_edit}
              title=""
              className="btn btn-secondary"
            >
              {btnEditTitle}
            </a>
          </li>
        )}
        {link_approve && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleApproveConfirmationBox()
              }}
            >
              {labels.APPROVE}
            </a>
          </li>
        )}
        {link_accept && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleApproveConfirmationBox()
              }}
            >
              {labels.ACCEPT}
            </a>
          </li>
        )}
        {link_reject && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleRejectConfirmationBox()
              }}
            >
              {labels.REJECT}
            </a>
          </li>
        )}
        {link_delete && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleShowConfirmationBox()
              }}
            >
              {btnCancelTitle}
            </a>
          </li>
        )}
        {link_inmail && !isTopData && (
          <li>
            <a
              href={link_inmail}
              data-link={link_inmail}
              title=""
              className="btn btn-secondary"
            >
              {labels.MESSAGE}
            </a>
          </li>
        )}
        {link_admin && (
          <li>
            <a
              onClick={() => getManageUrl()}
              data-link={link_admin}
              title="Administrar empresa"
              className="btn btn-secondary"
            >
              {labels.ADMINISTRATE}
            </a>
          </li>
        )}
        {link_unfollow && (
          <li>
            <a
              onClick={() => handleUnfollow(link_unfollow)}
              data-link={link_unfollow}
              title="Administrar empresa"
              className="btn btn-tertiary"
            >
              {labels.UNFOLLOW}
            </a>
          </li>
        )}

        {link_block && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleBlockConfirmationBox()
              }}
            >
              {labels.BLOCK}
            </a>
          </li>
        )}
        {link_unblock && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleUnblockConfirmationBox()
              }}
            >
              {labels.UNBLOCK}
            </a>
          </li>
        )}
        {link_request && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleRequestConfirmationBox()
              }}
            >
              {labels.CONNECT}
            </a>
          </li>
        )}
        {link_cancel && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleCancelConfirmationBox()
              }}
            >
              {labels.CANCEL}
            </a>
          </li>
        )}
        {link_leave && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault()
                handleLeaveConfirmationBox()
              }}
            >
              {labels.LEAVE}
            </a>
          </li>
        )}
        {link_impersonate && (
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={() => getImpersonateUrl(link_impersonate)}
            >
              {' '}
              Personificar{' '}
            </a>
          </li>
        )}
      </ul>
      {link_delete && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showConfirmationBox}
            onClose={() => handleShowConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_delete)}
          />
        </div>
      )}
      {link_cancel && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showCancelConfirmationBox}
            onClose={() => handleCancelConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_cancel)}
          />
        </div>
      )}
      {link_block && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showBlockConfirmationBox}
            onClose={() => handleBlockConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_block)}
          />
        </div>
      )}
      {link_accept && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showApproveConfirmationBox}
            onClose={() => handleApproveConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_accept)}
          />
        </div>
      )}
      {link_approve && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showApproveConfirmationBox}
            onClose={() => handleApproveConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_approve)}
          />
        </div>
      )}
      {link_reject && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showRejectConfirmationBox}
            onClose={() => handleRejectConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_reject)}
          />
        </div>
      )}
      {link_request && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showRequestConfirmationBox}
            onClose={() => handleRequestConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_request)}
          />
        </div>
      )}
      {link_unblock && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showUnblockConfirmationBox}
            onClose={() => handleUnblockConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_unblock)}
          />
        </div>
      )}
      {link_leave && (
        <div style={{ position: 'relative' }}>
          <ConfirmationBox
            show={showLeaveConfirmationBox}
            onClose={() => handleLeaveConfirmationBox(false)}
            onAccept={() => handleCancelApply(link_leave)}
          />
        </div>
      )}
      {loading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
    </div>
  )
}

export default Profile