import { Rating } from "@mui/material";
import ProgressAll from "./ProgressAll";
import StarDI from "@/components/icons/StarDI";
import LikeDI from "@/components/icons/LikeDI";
import ProgressDetail from "@/app/component/ProfressDetail";
import TextLoading from "@/app/component/loading/Text";
import CustomLoading from "@/app/component/loading/Custom";

function Chart({ comments, rateAggregate }) {
  const point = rateAggregate?.point ?? 0;
  const satisfaction = rateAggregate?.satisfaction ?? 0;
  const averages = rateAggregate?.averages ?? [];
  return (
    <div
      className=" rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF] pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px] "
    >
      <TextLoading width={130} height={20}>
        <div className="flex items-center justify-start gap-2.5">
          <p className="text-[#616161] text-[14px] font-medium">
            امتیاز کلی کاربران: {point} از 5
          </p>
          <p className="text-[#7E7E7E] text-[14px] font-normal">
            (از مجموع {comments?.length || 0} نظر)
          </p>
        </div>
      </TextLoading>
      <div className="mt-0 mb-0 hidden md:flex">
        <TextLoading width={160} height={20}>
          <Rating
            readOnly
            value={point}
            precision={0.5}
            size="small"
            name="read-only"
            className="!mt-4 !mb-6 !hidden lg:!flex"
          />
        </TextLoading>
      </div>
      <div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
        <CustomLoading width={130} height={30}>
          <div className="flex p-1 gap-0.5 items-start justify-center">
            <StarDI />
            <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
              امتیاز: {point}
            </p>
          </div>
          <div className="flex p-1 items-start gap-0.5">
            <LikeDI />
            <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
              {satisfaction}% رضایت کاربران
            </p>
          </div>
        </CustomLoading>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-[50px]">
        <ul className="flex w-full flex-col items-start justify-start gap-1.5 lg:w-fit">
          {(averages.length ? averages : Array(5).fill(null)).map((item, idx) => (
            <ProgressDetail data={item} idx={idx} key={idx} />
          ))}
        </ul>
        <ProgressAll satisfaction={satisfaction} />
      </div>
    </div>
  );
}

export default Chart;
