trampa-frontend/src/components/Cards/ProfileCard/ProfileCard.js

import React from "react";
import PropTypes from "prop-types";
import {
  EditButton,
  ProfileCardWrapper,
  ProfileCardContainer,
  ProfileCardHeader,
  HeaderTitle,
  EditIcon,
  ProfileInfoContainer,
  RemoveButton,
  RemoveIcon,
  BlockButton,
  BlockIcon,
  ButtonsContainer,
  BlockLabelIcon,
  // MessageButton,
  // MessageIcon,
  ProfileInfoAndContactContainer,
  UnblockButton,
  UnblockIcon,
} from "./ProfileCard.styled";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
import { useRouteMatch } from "react-router-dom";
import { fetchProfile } from "../../../store/actions/profile/profileActions";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { selectProfile } from "../../../store/selectors/profileSelectors";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import { fetchProfileOffers } from "../../../store/actions/offers/offersActions";
import ProfileMainInfo from "./ProfileMainInfo/ProfileMainInfo";
import ProfileContact from "./ProfileContact/ProfileContact";
import ProfileStats from "./ProfileStats/ProfileStats";
import { useTranslation } from "react-i18next";
import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
import { PROFILE_SCOPE } from "../../../store/actions/profile/profileActionConstants";
import SkeletonProfileCard from "./SkeletonProfileCard/SkeletonProfileCard";
import { useMemo } from "react";
import companyData from "../../../notFoundData/companyData";
import UserLabeledCard from "../LabeledCard/User/UserLabeledCard";
import history from "../../../store/utils/history";
import { HOME_PAGE } from "../../../constants/pages";
import useIsMobile from "../../../hooks/useIsMobile";
import BlockedProfile from "./BlockedProfile/BlockedProfile";
import {
  toggleDeleteCategoryModal,
  toggleEditProfileModal,
} from "../../../store/actions/modal/modalActions";
import {
  USERS_BLOCK_TYPE,
  USERS_DELETE_TYPE,
  USERS_UNBLOCK_TYPE,
} from "../../../constants/adminTypeConstants";
import { Tooltip } from "@mui/material";

const ProfileCard = (props) => {
  const isLoading = useSelector(selectIsLoadingByActionType(PROFILE_SCOPE));
  const routeMatch = useRouteMatch();
  const dispatch = useDispatch();
  const { isMobile } = useIsMobile();
  const profileFromRedux = useSelector(selectProfile);
  const userId = useSelector(selectUserId);
  const idProfile = useMemo(() => {
    return routeMatch.params.idProfile;
  }, [routeMatch.params.idProfile]);
  const { t } = useTranslation();

  const profile = useMemo(() => {
    if (profileFromRedux) {
      if (profileFromRedux._id === routeMatch.params.idProfile) {
        return profileFromRedux;
      }
    }
    return companyData;
  }, [profileFromRedux]);

  const isMyProfile = useMemo(
    () => userId === idProfile && !props.isAdmin,
    [userId, idProfile]
  );

  useEffect(() => {
    if (idProfile?.length > 0) {
      reFetchProfile();
    }
  }, [idProfile]);
  useEffect(() => {
    if (profile && isMyProfile !== undefined) {
      if (!isMyProfile && profile._blocked && !props.isAdmin)
        history.push(HOME_PAGE);
    }
  }, [profile, isMyProfile, props.isAdmin]);

  const reFetchProfile = () => {
    dispatch(fetchProfile(idProfile));
    dispatch(fetchProfileOffers(idProfile));
  };

  let percentOfSucceededExchanges;
  if (profile?.statistics?.exchanges?.succeeded === 0) {
    percentOfSucceededExchanges = 0;
  } else {
    percentOfSucceededExchanges = Math.ceil(
      (profile?.statistics?.exchanges?.total /
        profile?.statistics?.exchanges?.succeeded) *
        100
    );
  }
  const removeUser = () => {
    dispatch(
      toggleDeleteCategoryModal({
        customId: profile?._id,
        type: USERS_DELETE_TYPE,
        customLabeledCard: <UserLabeledCard user={profile} />,
        customLabeledCardHeight: "90px",
      })
    );
  };
  const blockUser = () => {
    dispatch(
      toggleDeleteCategoryModal({
        customId: profile?._id,
        type: USERS_BLOCK_TYPE,
        customLabeledCard: <UserLabeledCard user={profile} />,
        customLabeledCardHeight: "90px",
        customLabeledCardIcon: <BlockLabelIcon />,
      })
    );
  };
  const unblockUser = () => {
    dispatch(
      toggleDeleteCategoryModal({
        customId: profile?._id,
        type: USERS_UNBLOCK_TYPE,
        customLabeledCard: <UserLabeledCard user={profile} />,
        customLabeledCardHeight: "90px",
      })
    );
  };
  const handleEditProfile = () => {
    if (!profile?._blocked) {
      dispatch(
        toggleEditProfileModal({
          profile: profile,
          isAdmin: props.isAdmin,
          reFetchProfile: reFetchProfile,
        })
      );
    }
  };

  return (
    <>
      {isLoading ? (
        <SkeletonProfileCard />
      ) : (
        <>
          <ProfileCardContainer isAdmin={props.isAdmin}>
            <ProfileCardHeader>
              <PersonOutlineIcon color="action" sx={{ mr: 0.9 }} />
              <HeaderTitle>
                {isMyProfile
                  ? t("profile.myProfile")
                  : t("profile.companyProfile")}
              </HeaderTitle>
            </ProfileCardHeader>
            <ProfileCardWrapper
              variant="outlined"
              isAdmin={props.isAdmin}
              isMyProfile={isMyProfile}
              blocked={!props.isAdmin && profile?._blocked}
            >
              <ButtonsContainer>
                {profile?._blocked && !isMobile && <BlockedProfile />}
                {props.isAdmin && (
                  <>
                    {profile?._blocked ? (
                      <UnblockButton onClick={unblockUser}>
                        <UnblockIcon />
                      </UnblockButton>
                    ) : (
                      <BlockButton onClick={blockUser}>
                        <BlockIcon />
                      </BlockButton>
                    )}
                    <RemoveButton onClick={removeUser}>
                      <RemoveIcon />
                    </RemoveButton>
                  </>
                )}
                {(isMyProfile || props.isAdmin) && (
                  <Tooltip title={t("editProfile.tooltip")}>
                    <EditButton
                      onClick={handleEditProfile}
                      isAdmin={props.isAdmin}
                      disabled={!props.isAdmin && profile?._blocked}
                    >
                      <EditIcon />
                    </EditButton>
                  </Tooltip>
                )}
              </ButtonsContainer>
              <ProfileInfoContainer>
                <ProfileInfoAndContactContainer isAdmin={props.isAdmin}>
                  {profile?._blocked && !props.isAdmin && isMobile && (
                    <BlockedProfile aboveTitle isAdmin={props.isAdmin} />
                  )}

                  {/* Profile Main Info  */}
                  <ProfileMainInfo
                    isAdmin={props.isAdmin}
                    profile={profile}
                    isMyProfile={isMyProfile}
                    isBlocked={!props.isAdmin && profile?._blocked}
                  />
                  {/* Profile Contact */}
                  <ProfileContact
                    profile={profile}
                    isAdmin={props.isAdmin}
                    isMyProfile={
                      (!props.isAdmin && profile?._blocked) || isMyProfile
                    }
                  />
                </ProfileInfoAndContactContainer>
                {/* Profile Stats */}
                <ProfileStats
                  profile={profile}
                  percentOfSucceededExchanges={percentOfSucceededExchanges}
                />
              </ProfileInfoContainer>
            </ProfileCardWrapper>
          </ProfileCardContainer>
        </>
      )}
    </>
  );
};

ProfileCard.propTypes = {
  children: PropTypes.node,
  isAdmin: PropTypes.bool,
};

export default ProfileCard;