"use server";
//https://github.com/vercel/next.js/discussions/63862

import React from "react";
import { getAllAvatarParts } from "@/lib/api";
import { AvatarCustomization } from "@/components/avatarcustomization/page";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import ChunithmScorePlaylog from "@/components/scoreplaylog/page";

// the number is the category id for the specific part

const getAvatarHeadAccessories = async () => {
  const avatarParts = await getAllAvatarParts(2);
  return { avatarParts };
};

const getAvatarFaceAccessories = async () => {
  const avatarParts = await getAllAvatarParts(3);
  return { avatarParts };
};

const getAvatarItemAccessories = async () => {
  const avatarParts = await getAllAvatarParts(5);
  return { avatarParts };
};
const getAvatarBackAccessories = async () => {
  const avatarParts = await getAllAvatarParts(7);
  return { avatarParts };
};
const getAvatarWearAccessories = async () => {
  const avatarParts = await getAllAvatarParts(1);
  return { avatarParts };
};

const Page = async () => {
  const AvatarHeadAccessories = await getAvatarHeadAccessories();
  const AvatarFaceAccessories = await getAvatarFaceAccessories();
  const AvatarItemAccessories = await getAvatarItemAccessories();
  const AvatarBackAccessories = await getAvatarBackAccessories();
  const AvatarWearAccessories = await getAvatarWearAccessories();

  return (
    <div className="p-10">
      <Tabs defaultValue="scores">
        <TabsList>
          <TabsTrigger value="scores">Scores</TabsTrigger>
          <TabsTrigger value="customize">Customize</TabsTrigger>
        </TabsList>
        <TabsContent value="scores">
          <ChunithmScorePlaylog />
        </TabsContent>
        <TabsContent value="customize">
          <div className="p-10">
            <AvatarCustomization
              avatarHeadSelectionData={AvatarHeadAccessories}
              avatarFaceSelectionData={AvatarFaceAccessories}
              avatarItemSelectionData={AvatarItemAccessories}
              avatarBackSelectionData={AvatarBackAccessories}
              avatarWearSelectionData={AvatarWearAccessories}
            />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default Page;