import React, { useMemo } from "react";
import PropTypes from "prop-types";
import {
  ChatInfo,
  ChatCardContainer,
  UserImage,
  UserImgWrapper,
  UserName,
  ProfileNameContainer,
} from "./ChatCard.styled";
import MobileOfferDetails from "./MobileOfferDetails/MobileOfferDetails";
import useIsMobile from "../../../hooks/useIsMobile";
import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
import BlockedProfile from "../ProfileCard/BlockedProfile/BlockedProfile";

// Chat card is shown only on mobile phones (route /messages)
const ChatCard = (props) => {
  const { isMobile } = useIsMobile();

  const chat = useMemo(() => {
    return props.chat;
  }, [props.chat]);

  const routeToItem = () => {
    props.navigateToChat(chat?.chat?._id);
  };

  return (
    <ChatCardContainer onClick={routeToItem}>
      <UserImgWrapper>
        <UserImage
          src={getImageUrl(
            chat?.interlocutorData?.image,
            variants.chatCard,
            isMobile
          )}
        />
      </UserImgWrapper>
      <ChatInfo isBlocked={props.chat.interlocutorData?._blocked}>
        <ProfileNameContainer>
          <UserName>{chat?.interlocutorData?.name}</UserName>
          {(props.chat.interlocutorData?._blocked ||
            props.chat.interlocutorData?._deleted) && (
            <BlockedProfile
              redText
              chatCard
              shortText
              aboveTitle
              hideIcon
              deleted={props.chat.interlocutorData?._deleted}
            />
          )}
        </ProfileNameContainer>
        <MobileOfferDetails chat={chat} />
      </ChatInfo>
    </ChatCardContainer>
  );
};

ChatCard.propTypes = {
  chat: PropTypes.any,
  navigateToChat: PropTypes.func,
};
ChatCard.defaultProps = {
  halfwidth: false,
  sponsored: false,
};

export default ChatCard;
