import React, { useMemo } from "react";
import Header from "./Header/Header";
import { useSelector } from "react-redux";
import { ItemDetailsContainer } from "./ItemDetails.styled";
import ItemDetailsCard from "../Cards/ItemDetailsCard/ItemDetailsCard";
import ItemDetailsHeaderCard from "./ItemDetailsHeaderCard/ItemDetailsHeaderCard";
import { selectOffer } from "../../store/selectors/offersSelectors";
import { selectUserId } from "../../store/selectors/loginSelectors";
// import { useHistory } from 'react-router-dom';

const ItemDetails = () => {
  const offer = useSelector(selectOffer);
  const userId = useSelector(selectUserId);
  let isMyProfile = useMemo(() => {
    if (offer?.offer?.userId?.toString() === userId?.toString()) {
      return true;
    }
    return false;
  }, [offer, userId]);
  return (
    <ItemDetailsContainer>
      <Header />
      <ItemDetailsHeaderCard offer={offer} isMyProfile={isMyProfile} />
      <ItemDetailsCard offer={offer} isMyOffer={isMyProfile} />
    </ItemDetailsContainer>
  );
};

export default ItemDetails;
