"use client";
import { AiFillStar } from "react-icons/ai";
import React, { useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { Rate } from "antd";
import DummyProgress from "@/components/UiComponents/ui/DummyProgress";
import { ScrollArea } from "@/components/UiComponents/ui/scroll-area";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import { Progress } from "@/components/UiComponents/ui/progress";
import EmptyContent from "../empty/EmptyContent";
type Props = {
  data : any;
  reviews_count : any;
  avg_rate : any;
  rate_percent : any;
  withTitle?:boolean;
};

export default function ProductsRates({data,reviews_count,avg_rate,rate_percent,withTitle=true}: Props) {
  
  const t = useTranslations("");
  const colors = ["#03A853", "#98D642", "#F3C221", "#DC8151", "#C54B4B"];
  const desc = [
    t("Text.terrible"),
    t("Text.bad"),
    t("Text.normal"),
    t("Text.good"),
    t("Text.wonderful"),
  ];
  const locale = useLocale();
  return (
    <div>
      <div className="container py-8">
        {withTitle && (
          <h2 className="capitalize font-bold lg:text-2xl text-xl text-start lg:leading-[50px]   leading-8 mb-8 ">
            {t("Text.productReviews")}
          </h2>
        )}
        <div className=" grid xl:grid-cols-[1.5fr_2fr] gap-12">
          <div
            data-aos="fade-right"
            className="flex content-between flex-col justidfy-center gap-2"
          >
            {avg_rate > 0 && (
              <>
                <p className="lg:text-3xl text-xl text-start font-extrabold text-[#595959]   leading-10">
                  {avg_rate?.toFixed(1)}
                </p>
                <div className="flex gap-2">
                  <Rate
                    tooltips={desc}
                    className="!text-[#03A853]"
                    allowHalf
                    disabled
                    defaultValue={avg_rate}
                  />
                </div>
              </>
            )}
            {reviews_count > 0 && (
              <p className="text-lg font-extrabold text-[#595959]   leading-10">
                {t("Text.basedOn", { count: reviews_count })}
              </p>
            )}
            <div className="flex flex-col gap-2 ">
              {rate_percent?.length > 0 ? (
                rate_percent?.map((percent: any, index: number) => {
                  return (
                    <div className="flex gap-2 items-center" key={`percent_${index}`}>
                      <AiFillStar color={colors[index]} size={30} />
                      <span className="text-[#1F1F1F]">{percent?.rate}</span>
                      <Progress
                        value={percent?.percentage}
                        className="w-full !max-h-[8px]"
                        bg={colors[index]}
                      />
                    </div>
                  );
                })
              ) : (
                <DummyProgress />
              )}
            </div>
          </div>
          {data?.length > 0 ? (
            <ScrollArea
              className="grow  w-full"
              dir={locale === "en" ? "ltr" : "rtl"}
            >
              <div className={`h-[470px] flex flex-col pe-2`}>
                <div data-aos="fade-up">
                  <div className="flex flex-col gap-3">
                    {data?.map((ele: any, index: number) => {
                      return (
                        <div key={`card_el_${index}`} className="rate-card border-b-[1px] space-y-5 border-b-secColor text-text-gray pb-4"   >
                          <div className="flex gap-2 items-center">
                            <ImageWithFallback
                              src={ele?.client?.image}
                              width={1000}
                              height={1000}
                              className="w-16 h-16 rounded-full object-cover object-top"
                              alt={ele?.client?.full_name}
                            />
                            <div>
                              <h2 className="capitalize font-semibold lg:text-xl text-lg text-start  ">
                                {ele?.client?.full_name}
                              </h2>
                              <p className=" text-base font-medium text-start">
                                {ele?.created_at}
                              </p>
                            </div>
                          </div>
                      
                          <div className="flex gap-2 items-center">
                            <div className="flex gap-2">
                              <Rate
                                tooltips={desc}
                                className="!text-[#03A853]"
                                allowHalf
                                disabled
                                defaultValue={ele?.rating}
                              />
                            </div>
                            <p className="lg:text-2xl text-lg font-semibold text-[#595959]   leading-8">
                              {ele?.avg_rate?.toFixed(1)}
                            </p>
                          </div>
                          <h2 className="text-secondrydark  text-base font-medium leading-7 text-start lg:w-[80%]">
                            {ele?.review}
                          </h2>
                        </div>
                      );
                    })}
                  </div>
          
                </div>
              </div>
            </ScrollArea>
          ):<EmptyContent title="Messages.no_reviews" className="!py-0 !m-0 !justify-start"/>}
        </div>
      </div>
    </div>
  );
}