import React from "react";
import PropTypes from "prop-types";
import {
  ReviewCard,
  SecondStepCreateReviewContainer,
} from "./SecondStepCreateReview.styled";
import { CreateReviewTitle } from "../CreateReview.styled";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { selectMineProfile } from "../../../store/selectors/profileSelectors";
import NextButton from "./NextButton/NextButton";

const SecondStepCreateReview = (props) => {
  const { t } = useTranslation();
  const mineProfile = useSelector(selectMineProfile);

  const goToNextStep = () => {
    if (props.removingReview) props.closeModal();
    else props.goToNextStep();
  };

  return (
    <SecondStepCreateReviewContainer>
      <CreateReviewTitle>
        {props.removingReview
          ? t("admin.reviews.title")
          : t("reviews.modalTitle")}
      </CreateReviewTitle>
      <ReviewCard
        givingReview
        profileReviews={[
          {
            name: mineProfile?.company?.name,
            image: mineProfile?.image,
            offerName: props?.offer?.name,
            offerImage: props?.offer?.images[0],
            isGoodCommunication: props.review?.correctCommunication,
            isSuccessfulSwap: props.review?.exchangeSucceed,
            quote: props.review.comment,
          },
        ]}
      />
      <NextButton removingReview={props.removingReview} onClick={goToNextStep} />
    </SecondStepCreateReviewContainer>
  );
};

SecondStepCreateReview.propTypes = {
  children: PropTypes.node,
  review: PropTypes.any,
  offer: PropTypes.any,
  interlocutor: PropTypes.any,
  goToNextStep: PropTypes.func,
  removingReview: PropTypes.bool,
  closeModal: PropTypes.func,
};

export default SecondStepCreateReview;