import React, { useEffect } from "react";
import { PropTypes } from "prop-types";
import { ItemDetailsPageContainer } from "./ItemDetailsPage.styled";
import { useDispatch, useSelector } from "react-redux";
import ItemDetails from "../../components/ItemDetails/ItemDetails";
import ItemDetailsLayout from "../../layouts/ItemDetailsLayout/ItemDetailsLayout";
import { fetchOneOffer } from "../../store/actions/offers/offersActions";
import UserReviews from "../../components/UserReviews/UserReviews";
import { selectOffer } from "../../store/selectors/offersSelectors";

const ItemDetailsPage = (props) => {
  const dispatch = useDispatch();
  const selectedOffer = useSelector(selectOffer);

  const offerId = props.match.params.idProizvod;

  useEffect(() => {
    if (offerId && !selectedOffer?.offer) {
      dispatch(fetchOneOffer(offerId));
    }
  }, [offerId, selectedOffer?.offer]);

  return (
    <ItemDetailsPageContainer>
      <ItemDetailsLayout
        content={<ItemDetails />}
        rightCard={<UserReviews />}
      />
    </ItemDetailsPageContainer>
  );
};

ItemDetailsPage.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      idProizvod: PropTypes.string,
    }),
  }),
};

export default ItemDetailsPage;
