import React from "react";
import PropTypes from "prop-types";
import { ReviewList, ReviewsBox, ThumbDown, ThumbUp } from "./UserReviewsCard.styled";

import {
  Avatar,
  Grid,
  ListItem,
  ListItemAvatar,
  Typography,
  Divider,
} from "@mui/material";
import Mockupdata from "./Mockupdata";
import StarBorderIcon from "@mui/icons-material/StarBorder";
import selectedTheme from "../../themes";
import { useSelector } from "react-redux";
import { selectOffer } from "../../store/selectors/offersSelectors";

const UserReviewsCard = (props) => {
  var dataMockupdata = JSON.parse(JSON.stringify(Mockupdata));
  const offer = useSelector(selectOffer);
  console.log("user reviews: ", offer);
  return (
    <>
      <ReviewsBox>
        <Grid
          container
          direction="row"
          justifyContent="start"
          alignItems="center"
          sx={{ mb: 1.4 }}
        >
          <StarBorderIcon color="action" sx={{ mr: 0.9 }} />
          <Typography>{props.heading}</Typography>
        </Grid>
        <ReviewList>
          {offer?.companyData?.lastThreeReviews?.map((review) => (
            <>
              <ListItem
                alignItems="flex-start"
                sx={{ alignItems: "center", mt: 2 }}
              >
                <ListItemAvatar sx={{ mt: 0 }}>
                  <Avatar alt={review.name} src="/static/images/avatar/1.jpg" />
                </ListItemAvatar>
                <Typography sx={{ color: selectedTheme.primaryPurple }}>
                  <b>{review.name}</b>
                </Typography>
              </ListItem>
              <Grid
                container
                direction="row"
                justifyContent="start"
                alignItems="center"
                spacing={2}
                sx={{ pl: 2, py: 2 }}
              >
                <Grid item xs={1}>
                  {review.isGood ? (
                    <ThumbUp color="success" />
                  ) : (
                    <ThumbDown color="error" />
                  )}
                </Grid>
                <Grid item xs={11}>
                  <Typography
                    sx={{ display: "inline" }}
                    component="span"
                    variant="body2"
                    color="text.primary"
                  >
                    &quot;{review?.quote}&quot;
                  </Typography>
                </Grid>
              </Grid>
              <Grid sx={{ pl: 2, pb: 2 }}>
                <Typography variant="body2" sx={{ display: "block" }}>
                  Korektna komunikacija: <b>{review.isGoodCommunication}</b>
                </Typography>
                <Typography variant="body2" sx={{ display: "block" }}>
                  Uspešna trampa: <b>{review.isSuccessfulSwap}</b>
                </Typography>
              </Grid>
              {review.id < dataMockupdata.length - 1 ? (
                <Divider variant="inset" component="li" sx={{ ml: 0 }} />
              ) : (
                <></>
              )}
            </>
          ))}
        </ReviewList>
      </ReviewsBox>
    </>
  );
};

UserReviewsCard.propTypes = {
  children: PropTypes.node,
  heading: PropTypes.string,
};

export default UserReviewsCard;