"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Progress } from "@/components/ui/progress";
import { getUserFeedbacks } from "@/service/master/faq";
import { Icon } from "@iconify/react/dist/iconify.js";
import { stringify } from "querystring";
import { useEffect, useState } from "react";

export default function UserFeedback() {
  const [listData, setListData] = useState<any>([]);

  useEffect(() => {
    initState();
  }, []);
  async function initState() {
    const response = await getUserFeedbacks();
    console.log("ssss", response?.data?.data);
    setListData(response?.data?.data);
  }

  const renderStar = (count: number) => {
    const mapped = [1, 2, 3, 4, 5];
    return (
      <div className="flex flex-row gap-3 items-center">
        {mapped?.map((row) =>
          row < count + 1 ? (
            <Icon key={row} icon="emojione:star" width={33} />
          ) : (
            <Icon key={row} icon="emojione-monotone:star" width={33} />
          )
        )}
      </div>
    );
  };
  return (
    <div>
      <SiteBreadcrumb />
      <div className="flex flex-col gap-2 bg-white dark:bg-black p-4">
        <p className="text-lg">Hasil Feedback</p>
        <div className="grid grid-cols-2 gap-5">
          {listData?.map(
            (list: any) =>
              list?.avgScore !== "NaN" && (
                <div
                  key={list?.id}
                  className="flex flex-col gap-2 bg-gray-100 dark:bg-blue-950 rounded-md p-5"
                >
                  <div className="flex flex-row gap-3 items-center">
                    <p className="text-3xl">{parseInt(list?.avgScore)}</p>
                    {renderStar(parseInt(list?.avgScore))}
                  </div>
                  <p className="font-semibold">{list?.question}</p>
                  <div className="flex flex-row gap-3 items-center">
                    <p className="w-[120px]">Penilaian 5</p>
                    <Progress
                      value={parseInt(list?.score5)}
                      className="w-[70%]"
                    />
                  </div>
                  <div className="flex flex-row gap-3 items-center">
                    <p className="w-[120px]">Penilaian 4</p>
                    <Progress
                      value={parseInt(list?.score4)}
                      className="w-[70%]"
                    />
                  </div>
                  <div className="flex flex-row gap-3 items-center">
                    <p className="w-[120px]">Penilaian 3</p>
                    <Progress
                      value={parseInt(list?.score3)}
                      className="w-[70%]"
                    />
                  </div>
                  <div className="flex flex-row gap-3 items-center">
                    <p className="w-[120px]">Penilaian 2</p>
                    <Progress
                      value={parseInt(list?.score2)}
                      className="w-[70%]"
                    />
                  </div>
                  <div className="flex flex-row gap-3 items-center">
                    <p className="w-[120px]">Penilaian 1</p>
                    <Progress
                      value={parseInt(list?.score1)}
                      className="w-[70%]"
                    />
                  </div>
                </div>
              )
          )}
        </div>
      </div>
    </div>
  );
}