import React from "react";
import PropTypes from "prop-types";
import {
  ProfileMainInfoContainer,
  AvatarImageContainer,
  AvatarImage,
  ProfileMainInfoGrid,
  ProfileName,
  ProfilePIBContainer,
  PocketIcon,
  ProfilePIB,
  // BlockedProfileText,
} from "./ProfileMainInfo.styled";
import { useTranslation } from "react-i18next";
import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
import useIsMobile from "../../../../hooks/useIsMobile";
import history from "../../../../store/utils/history";
import {
  isAdminRoute,
  replaceInRoute,
} from "../../../../util/helpers/routeHelpers";
import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages";
import BlockedProfile from "../BlockedProfile/BlockedProfile";

const ProfileMainInfo = (props) => {
  const { t } = useTranslation();
  const { isMobile } = useIsMobile();
  const goToUser = () => {
    if (isAdminRoute()) {
      history.push(
        replaceInRoute(ADMIN_SINGLE_USER_PAGE, {
          idProfile: props.profile?._id,
        })
      );
    }
  };
  return (
    <ProfileMainInfoContainer
      bigProfileCard={props.bigProfileCard}
      isAdmin={props.isAdmin}
    >
      <AvatarImageContainer>
        <AvatarImage
          isAdmin={props.isAdmin}
          src={getImageUrl(
            props.profile?.image,
            variants.profileImage,
            isMobile
          )}
        />
      </AvatarImageContainer>
      <ProfileMainInfoGrid bigProfileCard={props.bigProfileCard}>
        {props.profile?._blocked &&
          props.isAdmin &&
          (!isMobile || (isMobile && props.bigProfileCard)) && (
            <BlockedProfile hideIcon redText aboveTitle isAdmin />
          )}
        <ProfileName
          bigProfileCard={props.bigProfileCard}
          isAdmin={props.isAdmin}
          isMyProfile={props.isMyProfile}
          isBlocked={props.isBlocked}
          variant="h5"
          onClick={goToUser}
        >
          {props.profile?.company?.name}
        </ProfileName>
        <ProfilePIBContainer>
          <PocketIcon />
          <ProfilePIB
            isMyProfile={props?.isBlocked || props.isMyProfile}
            isBlocked={props.isBlocked}
            variant="subtitle2"
          >
            {t("profile.PIB")} {props.profile?.company?.PIB}
          </ProfilePIB>
        </ProfilePIBContainer>
      </ProfileMainInfoGrid>
    </ProfileMainInfoContainer>
  );
};

ProfileMainInfo.propTypes = {
  profile: PropTypes.object,
  isMyProfile: PropTypes.bool,
  children: PropTypes.node,
  isAdmin: PropTypes.any,
  bigProfileCard: PropTypes.bool,
  isBlocked: PropTypes.bool,
};
ProfileMainInfo.defaultProps = {
  isAdmin: false,
  bigProfileCard: false,
  isBlocked: false,
  isMyProfile: false,
};

export default ProfileMainInfo;