"use client";
import React, { FC, useState } from "react";
import { getDifficultyText } from "@/lib/helpers";
import { Skeleton } from "../ui/skeleton";

type userRatingBaseList = {
  title: string;
  artist: string;
  genre: string;
  chartId: string | number;
  level: string | number;
  jacketPath: string;
  rating: number;
  version: number;
  index: number;
  musicId: number | null;
  difficultId: number | null;
  score: number | null;
};

type chunithmTopPlays = {
  chuniProfileTopPlays: {
    topPlays: userRatingBaseList[];
  };
};

export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
  chuniProfileTopPlays,
}) => {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
      {" "}
      {chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => {
        const [isLoading, setIsLoading] = useState(true);

        const jacketPath = chuniProfileTopPlays.jacketPath?.replace(
          ".dds",
          ".png",
        );

        const handleImageLoad = () => {
          setIsLoading(false);
        };

        const handleImageError = () => {
          setIsLoading(false);
        };

        return (
          <div key={index} className="flex flex-col items-center p-2">
            <div className="font-bold"></div>
            {jacketPath && (
              <>
                <img
                  src={`/jacketArts/${jacketPath}`}
                  alt="Jacket"
                  className={`mr-2 inline-block h-[100px] w-[100px] ${
                    isLoading ? "hidden" : ""
                  }`}
                  onLoad={handleImageLoad}
                  onError={handleImageError}
                />
                {isLoading && (
                  <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
                )}
              </>
            )}
            {!jacketPath && (
              <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
            )}
            <ul className="mt-2 text-center">
              <li>
                <strong>Title: </strong> {chuniProfileTopPlays.title}
              </li>
              <li>
                <strong>Level: </strong> {chuniProfileTopPlays.level}
              </li>
              <li>
                <strong>Difficulty: </strong>{" "}
                {getDifficultyText(Number(chuniProfileTopPlays.chartId))}
              </li>
              <li>
                <strong>Score: </strong>{" "}
                {chuniProfileTopPlays.score?.toLocaleString()}
              </li>
              <li>
                <strong>Rating: </strong>{" "}
                {(chuniProfileTopPlays.rating / 100).toFixed(2)}
              </li>
            </ul>
          </div>
        );
      })}
    </div>
  );
};