"use client"

import { Progress } from "antd"
import Rate from "../Common/Rate"
import { useEffect, useState } from "react"
import { useTranslations } from "next-intl"
import { round } from "lodash"

type IProps = {
  averageRate: number
  total?: number
  data?: any
  className?: string
}

export default function CommentReport({ averageRate, total, className, data }: IProps) {
  const [startSize, setStartSize] = useState(24)
  const transGeneral = useTranslations("general")

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 992) {
        setStartSize(32)
      } else {
        setStartSize(24)
      }
    }
    handleResize()
    window.addEventListener("resize", handleResize)

    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

  return (
    <div className={className}>
      <h2 className="text-[var(--secondary-100)] font-bold text-xl lg:text-2xl mb-1 lg:mb-3">{transGeneral("comment_review")}</h2>
      <div className="text-[var(--secondary-100)]">
        {!total ? (
          <p className="md:text-base lg:text-lg">{transGeneral("no_comment_review")}</p>
        ) : (
          <>
            <div className="md:flex items-center gap-3 mb-4 md:flex-row-reverse md:justify-end">
              <p className="md:text-base lg:text-lg mb-3 md:mb-0">
                {total} {transGeneral("comment_review")}
              </p>
              <div className="flex items-center gap-3">
                <Rate
                  value={averageRate}
                  color="#db9a1d"
                  size={startSize}
                />
                <span className="font-medium text-2xl md:text-3xl lg:text-4xl">{averageRate}</span>
              </div>
            </div>
            {data && (
              <div>
                {data?.map((item: any) => (
                  <div
                    key={item.rating}
                    className="flex gap-4 md:gap-6 lg:gap-9 items-center md:text-base lg:text-lg py-1">
                    <span className="font-semobold whitespace-nowrap">
                      {item.rating} {transGeneral("stars")}
                    </span>
                    <Progress
                      strokeColor="#db9a1d"
                      percent={round(((item.numbers || item?.counts || 0) / total) * 100)}
                      showInfo={false}
                      trailColor="#e5e7eb"
                      className="max-w-96 !mt-2"
                      size={{
                        height: 15,
                      }}
                    />
                    <span className="whitespace-nowrap">
                      {item.numbers || item?.counts || 0} ({round(((item.numbers || item?.counts || 0) / total) * 100)}%)
                    </span>
                  </div>
                ))}
              </div>
            )}
          </>
        )}
      </div>
    </div>
  )
}