import Form from "./Form";
import Rates from "./Rates";
import { Rating } from "@mui/material";
import CloseModalD from "@/components/icons/CloseModalD";

function Content({
  doctor,
  comment,
  setOpen,
  loading,
  setComment,
  setLoading,
  handleClose,
}) {
  const averageRate =
    comment.rate?.reduce((sum, item) => sum + item.progress, 0) /
    comment.rate?.length /
    20;
  const changeData = (parent, child, value) => {
    if (parent === "rate") {
      setComment((prevComment) => ({
        ...prevComment,
        rate: prevComment.rate.map((item) =>
          item.name === child ? { ...item, progress: value } : item
        ),
      }));
    } else {
      setComment((prevComment) => ({
        ...prevComment,
        [parent]: {
          ...prevComment[parent],
          [child]: value,
        },
      }));
    }
  };

  return (
    <>
      <div className="flex items-center justify-between w-full">
        <p className="text-[16px] text-[#525252] font-bold">
          امتیاز شما به {doctor?.name}
        </p>
        <div className="cursor-pointer" onClick={handleClose}>
          <CloseModalD />
        </div>
      </div>
      <Rating
        className="!my-[24px]"
        value={averageRate}
        readOnly
        dir="ltr"
        sx={{
          "& .MuiSvgIcon-root": {
            width: "16px",
            height: "16px",
          },
        }}
      />
      <Rates comment={comment} changeData={changeData} />
      <Form
        doctor={doctor}
        comment={comment}
        loading={loading}
        setOpen={setOpen}
        setComment={setComment}
        changeData={changeData}
        setLoading={setLoading}
      />
    </>
  );
}

export default Content;
