import React from "react";
import PropTypes from "prop-types";
import {
  MessageIcon,
  OfferDetails,
  OfferImage,
  OfferTitle,
  HeaderTop,
  UserIcon,
  UserIconContainer,
} from "./ItemDetailsHeaderCard.styled";
import { ItemDetailsHeaderContainer } from "./ItemDetailsHeaderCard.styled";
import { ReactComponent as MessageColor } from "../../../assets/images/svg/mailColor.svg";
import { useHistory } from "react-router-dom";
import { useSelector } from "react-redux";
import { selectLatestChats } from "../../../store/selectors/chatSelectors";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import StatisticDetails from "./StatisticDetails/StatisticDetails";
import PIBDetail from "./OfferDetail/PIB/PIBDetail";
import CategoryDetail from "./OfferDetail/Category/CategoryDetail";

const ItemDetailsHeaderCard = (props) => {
  const history = useHistory();
  const chats = useSelector(selectLatestChats);
  const offer = props.offer;
  const userId = useSelector(selectUserId);

  const handleGoProfile = () => {
    history.push(`/profile/${offer?.offer?.userId}`);
  };
  const messageUser = (offer) => {
    const chatItem = chats.find(
      (item) => item.chat.offerId === offer?.offer?._id
    );
    if (chatItem !== undefined) {
      history.push(`/messages/${chatItem.chat._id}`);
    } else {
      if (offer?.offer?.userId !== userId) {
        history.push(`/messages/newMessage`, {
          offerId: offer?.offer?._id,
        });
      }
    }
  };
  return (
    <ItemDetailsHeaderContainer
      isMyProfile={props.isMyProfile}
      halfwidth={props.halfwidth ? 1 : 0}
    >
      <HeaderTop>
        <OfferImage src={offer?.companyData?.image} />
        <OfferDetails>
          <OfferTitle isMyProfile={props.isMyProfile} onClick={handleGoProfile}>
            {offer?.companyData?.company?.name}
          </OfferTitle>
          <PIBDetail offer={props.offer} isMyProfile={props.isMyProfile}/>
          <CategoryDetail offer={props.offer} isMyProfile={props.isMyProfile}/>
        </OfferDetails>
        {props.isMyProfile ? (
          <UserIconContainer onClick={handleGoProfile}>
            <UserIcon />
          </UserIconContainer>
        ) : (
          <MessageIcon onClick={() => messageUser(offer)}>
            <MessageColor />
          </MessageIcon>
        )}
      </HeaderTop>
      <StatisticDetails offer={offer} />
      
    </ItemDetailsHeaderContainer>
  );
};

ItemDetailsHeaderCard.propTypes = {
  children: PropTypes.node,
  id: PropTypes.number,
  title: PropTypes.string,
  description: PropTypes.string,
  category: PropTypes.string,
  author: PropTypes.string,
  location: PropTypes.string,
  image: PropTypes.node,
  quantity: PropTypes.number,
  package: PropTypes.string,
  numberOfViews: PropTypes.number,
  halfwidth: PropTypes.bool,
  sponsored: PropTypes.bool,
  offer: PropTypes.any,
  isMyProfile: PropTypes.bool,
};
ItemDetailsHeaderCard.defaultProps = {
  halfwidth: false,
  sponsored: false,
};

export default ItemDetailsHeaderCard;
