Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useState } from "react";
import { axios } from "../../utils";
import { Avatar } from "@mui/material";
import { Link, useHistory } from "react-router-dom";
import { addNotification } from "store/notification/notification.actions";
import { useDispatch, useSelector } from "react-redux";
import EditIcon from '@mui/icons-material/Edit'
import styled from "styled-components";
import Spinner from "../UI/Spinner";
import StyledContainer from "../widgets/WidgetLayout";
import ConfirmModal from "../modals/ConfirmModal";

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(StyledContainer)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  border-radius:5px;
`;

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

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

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 = "Ver",
  btnCancelTitle = "Borrar",
  btnEditTitle = "Editar",
  btnLeaveTitle = "Dejar",
  isTopData,
}) => {
  const [isShowConfirmation, setIsShowConfirmation] = useState(false);
  const [loading, setLoading] = useState(false);
  const confirmUrl = useRef("");
  const labels = useSelector(({ intl }) => intl.labels);
  const dispatch = useDispatch();
  const history = useHistory();

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

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

  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((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 = 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 || labels.accept,
      url: link_view,
      color: "primary",
    },
    { label: btnEditTitle || labels.edit, url: link_edit, color: "secondary" },
    { label: labels.approve, url: link_approve, color: "tertiary" },
    { label: btnLeaveTitle, url: link_remove, color: "tertiary" },
    { label: labels.accept, url: link_accept, color: "secondary" },
    { label: labels.reject, url: link_reject, color: "tertiary" },
    {
      label: btnCancelTitle || labels.cancel,
      url: link_delete,
      color: "tertiary",
    },
    {
      label: labels.message || "Mensaje",
      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: btnLeaveTitle, url: link_leave, color: "tertiary" },
    { label: "Personificar", url: link_impersonate, color: "tertiary" },
  ];

  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>
                    <Link
                      to={link_view}
                      data-link={link_view}
                      className="btn btn-primary"
                    >
                       <EditIcon />
                      {btnAcceptTitle}
                    </Link>
                  </li>
                )}
                {link_inmail && (
                  <li>
                    <Link
                      to={link_inmail}
                      data-link={link_inmail}
                      className="btn btn-tertiary"
                    >
                      {labels.message}
                    </Link>
                  </li>
                )}
              </ul>
            )}
          </StyledContent>
        </StyledHeader>
        <StyledItemContainer.Actions>
          {linksOptions.map(({ label, url }) => {
            const breakOptions = [link_view, link_edit, link_inmail];

            if (!url) {
              return null;
            }

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

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

            return (
              <button
                key={url}
                onClick={() => {
                  if (url === link_unfollow) {
                    return handleUnfollow(url);
                  }

                  if (url === link_admin) {
                    return getManageUrl();
                  }

                  if (url === link_impersonate) {
                    return getImpersonateUrl(url);
                  }

                  if (!breakOptions.includes(url)) {
                    return showConfirm(url);
                  } else {
                    history.push(url);
                  }
                }}
              >
                {label}
              </button>
            );
          })}
        </StyledItemContainer.Actions>
        {loading && (
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        )}
      </StyledItemContainer>
      <ConfirmModal
        show={isShowConfirmation}
        onClose={() => closeConfirm()}
        onAccept={() => onConfirm(confirmUrl.current)}
      />
    </>
  );
};

export default ProfileItem;