import React from "react";
import PropTypes from "prop-types";
import {
  MiniChatCardContainer,
  ProfileDetails,
  ProfileImage,
  ProfileName,
  ProfileNameContainer,
  ProfileProduct,
  ProfileProductName,
} from "./MiniChatCard.styled";
import { useTranslation } from "react-i18next";
import useIsMobile from "../../../hooks/useIsMobile";
import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
import history from "../../../store/utils/history";
import { replaceInRoute } from "../../../util/helpers/routeHelpers";
import { DIRECT_CHAT_PAGE } from "../../../constants/pages";
import BlockedProfile from "../ProfileCard/BlockedProfile/BlockedProfile";

const MiniChatCard = (props) => {
  const { t } = useTranslation();
  const { isMobile } = useIsMobile();
  const changeChat = () => {
    history.push(
      replaceInRoute(DIRECT_CHAT_PAGE, {
        chatId: props?.chat?.chat?._id,
      })
    );
  };
  return (
    <MiniChatCardContainer selected={props.selected} onClick={changeChat}>
      <ProfileImage
        src={getImageUrl(
          props?.chat?.interlocutorData?.image,
          variants.chatCard,
          isMobile
        )}
      />
      <ProfileDetails isBlocked={props.chat.interlocutorData?._blocked}>
        <ProfileNameContainer>
          <ProfileName selected={props.selected}>
            {props?.chat?.interlocutorData?.name}
          </ProfileName>
          {(props.chat.interlocutorData?._blocked ||
            props.chat.interlocutorData?._deleted) && (
            <BlockedProfile
              redText
              chatCard
              shortText
              aboveTitle
              hideIcon
              deleted={props.chat.interlocutorData?._deleted}
            />
          )}
        </ProfileNameContainer>
        <ProfileProduct selected={props.selected}>
          {t("messages.cardProduct")}
        </ProfileProduct>
        <ProfileProductName selected={props.selected}>
          {props?.chat?.offerData?.name}
        </ProfileProductName>
      </ProfileDetails>
    </MiniChatCardContainer>
  );
};

MiniChatCard.propTypes = {
  children: PropTypes.node,
  chat: PropTypes.any,
  selected: PropTypes.bool,
};

export default MiniChatCard;
