Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useState } from 'react'
import { axios } from '../../utils'
import { Avatar } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import { addNotification } from 'store/notification/notification.actions'
import { useDispatch, useSelector } from 'react-redux'
import styled from 'styled-components'

import Spinner from '../UI/Spinner'
import WidgetWrapper from '../widgets/WidgetLayout'
import ConfirmModal from '../modals/ConfirmModal'
import Button from '../UI/buttons/Buttons'

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  place-items: center;
  z-index: 50;
`

const StyledItemContainer = styled(WidgetWrapper)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: fit-content;
  border-radius: 5px;
`

const StyledHeader = styled.div`
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  position: relative;
  padding: 0.5rem;
`

const StyledContent = styled.div`
  display: flex;
  flex-direction: column;
  text-align: center;
  ul {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }
`

const Actions = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border-top: 1px solid rgb(211, 211, 211);
  padding: 0.5rem;
  gap: 0.5rem;
`

const StyledAvatar = styled(Avatar)`
  height: 60px !important;
  width: 60px !important;
`

const ProfileItem = ({
  image,
  name,
  email,
  network,
  status,
  fetchCallback,
  link_remove,
  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,
  btnAcceptTitle,
  btnCancelTitle,
  btnEditTitle,
  btnLeaveTitle,
  isTopData
}) => {
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
  const [loading, setLoading] = useState(false)
  const confirmUrl = useRef('')
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const showConfirm = (url = '') => {
    setIsShowConfirmation(true)
    confirmUrl.current = url
  }

  const closeConfirm = () => {
    setIsShowConfirmation(false)
    confirmUrl.current = ''
  }

  const getImpersonateUrl = async (url = '') => {
    try {
      const { data: response } = await axios.get(url)
      const { data, success } = response

      if (success) {
        window.location.href = data
      }
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  const onConfirm = (url) => {
    setLoading(true)
    axios
      .post(url)
      .then((response) => {
        const { success, data } = response.data

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        if (fetchCallback) fetchCallback()
        dispatch(addNotification({ style: 'success', msg: data }))
      })
      .catch(() => {
        dispatch(
          addNotification({
            style: 'error',
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.'
          })
        )
      })
      .finally(() => {
        confirmUrl.current = ''
        setLoading(false)
      })
  }

  const handleUnfollow = (link_unfollow) => {
    setLoading(true)
    axios
      .post(link_unfollow)
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        if (fetchCallback) fetchCallback()
        dispatch(addNotification({ style: 'success', msg: data }))
      })
      .finally(() => setLoading(false))
  }

  const getManageUrl = () => {
    axios
      .get(link_admin)
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          throw new Error(data)
        }

        setTimeout(() => {
          window.open(data, '_backend')
        }, 0)
      })
      .catch((error) => {
        console.log('>>: error > ', error)
      })
  }

  const navigateTo = (url) => {
    navigate(url)
  }

  return (
    <>
      <StyledItemContainer>
        <StyledHeader>
          {image && <StyledAvatar src={image} alt={`${name} image`} />}
          <StyledContent>
            <h2>{name}</h2>
            {isTopData && email && <h4>{email}</h4>}
            {network && <span>{network}</span>}
            {status && <span>{status}</span>}
            {isTopData && (
              <ul>
                {link_view && (
                  <li>
                    <Button
                      variant='primary'
                      onClick={() => navigateTo(link_view)}
                    >
                      {btnAcceptTitle || labels.view_profile}
                    </Button>
                  </li>
                )}
                {link_inmail && (
                  <li>
                    <Button
                      variant='secondary'
                      onClick={() => navigateTo(link_inmail)}
                    >
                      {labels.message}
                    </Button>
                  </li>
                )}
              </ul>
            )}
          </StyledContent>
        </StyledHeader>
        <Actions>
          {link_view && !isTopData ? (
            <Button variant='primary' onClick={() => navigateTo(link_view)}>
              {btnAcceptTitle || labels.view_profile}
            </Button>
          ) : null}

          {link_edit ? (
            <Button onClick={() => navigateTo(link_edit)} variant='secondary'>
              {btnEditTitle || labels.edit}
            </Button>
          ) : null}

          {link_accept ? (
            <Button onClick={() => onConfirm(link_accept)} variant='secondary'>
              {labels.accept}
            </Button>
          ) : null}

          {link_inmail && !isTopData ? (
            <Button variant='secondary' onClick={() => navigateTo(link_inmail)}>
              {labels.message}
            </Button>
          ) : null}

          {link_admin ? (
            <Button
              variant='secondary'
              onClick={() => getManageUrl(link_admin)}
            >
              {labels.administrate}
            </Button>
          ) : null}

          {link_approve ? (
            <Button variant='secondary' onClick={() => onConfirm(link_approve)}>
              {labels.approve}
            </Button>
          ) : null}

          {link_unblock ? (
            <Button variant='secondary' onClick={() => onConfirm(link_unblock)}>
              {labels.unblock}
            </Button>
          ) : null}

          {link_request ? (
            <Button variant='secondary' onClick={() => onConfirm(link_request)}>
              {labels.connect}
            </Button>
          ) : null}

          {link_impersonate ? (
            <Button
              variant='secondary'
              onClick={() => getImpersonateUrl(link_impersonate)}
            >
              Personificar
            </Button>
          ) : null}

          {link_remove ? (
            <Button variant='tertiary' onClick={() => showConfirm(link_remove)}>
              {labels.remove_application}
            </Button>
          ) : null}

          {link_reject ? (
            <Button variant='tertiary' onClick={() => showConfirm(link_reject)}>
              {labels.reject}
            </Button>
          ) : null}

          {link_delete ? (
            <Button variant='tertiary' onClick={() => showConfirm(link_delete)}>
              {btnCancelTitle || labels.cancel}
            </Button>
          ) : null}

          {link_unfollow ? (
            <Button
              variant='tertiary'
              onClick={() => handleUnfollow(link_unfollow)}
            >
              {labels.unfollow}
            </Button>
          ) : null}

          {link_block ? (
            <Button variant='tertiary' onClick={() => showConfirm(link_block)}>
              {labels.block}
            </Button>
          ) : null}

          {link_cancel ? (
            <Button variant='tertiary' onClick={() => showConfirm(link_cancel)}>
              {labels.cancel}
            </Button>
          ) : null}

          {link_leave ? (
            <Button variant='tertiary' onClick={() => showConfirm(link_leave)}>
              {btnLeaveTitle || labels.group_leave}
            </Button>
          ) : null}
        </Actions>
        {loading && (
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        )}
      </StyledItemContainer>
      <ConfirmModal
        show={isShowConfirmation}
        onClose={() => closeConfirm()}
        onAccept={() => onConfirm(confirmUrl.current)}
      />
    </>
  )
}

export default ProfileItem