import React, { useMemo } from "react";
import {
  ProfileHeader,
  ProfileHeaderIconContainer,
  ProfileHeaderText,
  ProfileMiniHeader,
  ProfileMiniStats,
} from "./ProfileMini.styled";
import { useSelector } from "react-redux";
import { selectOffer } from "../../store/selectors/offersSelectors";
import { selectUserId } from "../../store/selectors/loginSelectors";
import { ReactComponent as ProfileIcon } from "../../assets/images/svg/user-gray.svg";
import { useTranslation } from "react-i18next";
import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
import SkeletonProfileMini from "./SkeletonProfileMini/SkeletonProfileMini";
import { ONE_OFFER_SCOPE } from "../../store/actions/offers/offersActionConstants";

const ProfileMini = () => {
  const offer = useSelector(selectOffer);
  const userId = useSelector(selectUserId);
  const { t } = useTranslation();
  const isLoadingOfferContent = useSelector(
    selectIsLoadingByActionType(ONE_OFFER_SCOPE)
  );
  let isMyProfile = useMemo(() => {
    if (offer?.offer?.userId?.toString() === userId?.toString()) return true;
    return false;
  }, [offer, userId]);
  return (
    <>
      {isLoadingOfferContent || isLoadingOfferContent === undefined ? (
        <SkeletonProfileMini />
      ) : (
        <ProfileHeader>
          <ProfileHeaderIconContainer>
            <ProfileIcon />
            <ProfileHeaderText>
              {isMyProfile
                ? t("profile.myProfile")
                : t("profile.companyProfile")}
            </ProfileHeaderText>
          </ProfileHeaderIconContainer>
          <ProfileMiniHeader
            offer={offer}
            isMyProfile={isMyProfile}
            singleOffer
          />
          <ProfileMiniStats
            profile={offer.companyData}
            percentOfSucceededExchanges={
              offer.companyData?.statistics?.exchanges?.total
            }
            isMyProfile={isMyProfile}
          />
        </ProfileHeader>
      )}
    </>
  );
};

export default ProfileMini;