"use client";

import Box from "@mui/material/Box";
import Modal from "@mui/material/Modal";
import Stack from "@mui/material/Stack";
import ReviewModalContent from "./components/reviewModalContent/ReviewModalContent";
import { Typography } from "@mui/material";

const style = {
  position: "absolute" as "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: "90%",
  maxWidth: 400,
  bgcolor: "background.paper",
  border: "none",
  boxShadow: 24,
  borderRadius: 4,
  paddingInline: 2,
  paddingBlock: 4,
};

const labels: { [index: string]: string } = {
  0.5: "Useless",
  1: "Useless+",
  1.5: "Poor",
  2: "Poor+",
  2.5: "Ok",
  3: "Ok+",
  3.5: "Good",
  4: "Good+",
  4.5: "Excellent",
  5: "Excellent+",
};

interface ReviewModalProps {
  open: boolean;
  handleClose: () => void;
  reviewModalData: ReviewModalData[];
}

export interface ReviewModalData {
  reviewerName: string;
  reviewerEmail: string;
  date: string;
  comment: string;
  rating: number;
}

const ReviewModal = ({
  open,
  handleClose,
  reviewModalData,
}: ReviewModalProps) => {
  console.log("reviewModalData", reviewModalData);

  return (
    <Box>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography
            variant="h5"
            sx={{ lineHeight: 1, marginBlockEnd: "20px" }}
          >
            Reviews
          </Typography>
          <Stack
            spacing={2}
            direction={"column"}
            sx={{ maxHeight: "370px", overflow: "auto" }}
          >
            {reviewModalData.map((review: ReviewModalData, index: number) => (
              <ReviewModalContent key={index} data={review} />
            ))}
          </Stack>
        </Box>
      </Modal>
    </Box>
  );
};

export default ReviewModal;