import { getContextData } from "waku/middleware/context";
import { getState } from "@/lib/db";
import { startStudySession } from "@/actions/srs";
import StudySession from "@/components/Flashcard/StudySession";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import LessonSelector from "@/components/srs/LessonSelector";
import type { PageProps } from "waku/router";
import pdb from "@/lib/db/prosodydb";
import Deck from "@/components/Flashcard/Deck3";
import { CardFront, CardBack } from "@/components/Flashcard/ServerCard2";

// This is a server component that gets the initial data
export default async function StudyPage(props: PageProps<"/study/[slug]">) {
  const lessonId = props.slug;
  const ctx = getContextData() as any;
  const userId = ctx?.user?.id;
  const data = await getData();
  console.log({ data });
  const cardComponents = data.map((card) => {
    const syls = JSON.parse(card.syllables);
    const syllables = syls.map((s: any) => {
      const long = s.long === 1 ? true : s.long === 0 ? false : null;
      return { ...s, long };
    });
    const data = { ...card, syllables };
    return {
      id: card.id,
      front: <CardFront data={data} />,
      back: <CardBack data={data} />,
    };
  });

  return (
    <div className="container mx-auto py-8">
      <Deck
        data={{ lesson: { name: "hey", description: "hoy" } }}
        cards={cardComponents}
      />
    </div>
  );
}

const getData = async () => {
  const res = pdb.fetchFrequent("th");
  return res;
};

export const getConfig = async () => {
  return {
    render: "dynamic",
  } as const;
};