Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useEffect } from 'react'
import { axios } from '../../../utils'
import { Avatar } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
import MapOutlinedIcon from '@mui/icons-material/MapOutlined'
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'
import styled from 'styled-components'

import Paraphrase from '../../UI/Paraphrase'
import WidgetWrapper from '../WidgetLayout'
import Options from '../../UI/Option'

const StyledProfileContainer = styled(WidgetWrapper)`
  padding: 10px;
  text-align: center;
`

const StyledProfileStatus = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-around;
`

export default function ProfileInfo({
  image,
  name,
  description,
  visits,
  country,
  connections,
  linkAdmin,
  linkImpersonate
}) {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const options = useRef([
    {
      label: 'Configuración de la cuenta',
      action: () => navigate('/account-settings')
    },
    {
      label: 'Política de privacidad',
      action: () => navigate('/privacy-policy')
    },
    { label: 'Política de cookies', action: () => navigate('/cookies') },
    { label: 'Cerrar sesión', action: () => navigate('/signout') }
  ])

  const getAdminUrl = () => {
    axios
      .get('/backend/signin-admin')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

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

        window.open(data)
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  useEffect(() => {
    if (linkAdmin)
      options.current.unshift({ label: 'Administración', action: getAdminUrl })

    if (linkImpersonate)
      options.current.unshift({
        label: 'Personificar otro usuario',
        action: () => navigate('/impersonate')
      })
  }, [])

  return (
    <StyledProfileContainer>
      <Avatar
        src={image}
        alt={`${name} profile-image`}
        sx={{ margin: '0 auto', width: 100, height: 100 }}
      />
      <h2>{name}</h2>
      <Paraphrase>{description}</Paraphrase>

      <StyledProfileStatus>
        <span>
          <VisibilityOutlinedIcon />
          {visits}
        </span>
        <span>
          <MapOutlinedIcon />
          {country}
        </span>
        <span>
          <ShareOutlinedIcon />
          {connections}
        </span>
      </StyledProfileStatus>

      <Options options={options.current} top='10px' right='10px' />
    </StyledProfileContainer>
  )
}