"use client"

import { UserReviewCard } from "@/components/pages/stream/UserReviewCard";
import { Card, CardDescription } from "@/components/ui/card";
import { Account, fetchAccountById, fetchUserById } from "@/lib/db";
import { Circle } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { User } from "revolt-api";

export default function UserStream() {
  const [connectionState, setConnectionState] = useState<"Connecting"|"Connected"|"Disconnected">("Connecting");
  const [user, setUser] = useState<User | null>(null);
  const [account, setAccount] = useState<Account | null>(null);

  const connectionColour = useMemo(() => {
    switch(connectionState) {
      case "Connected": return "#55aa7f";
      case "Connecting": return "#fb923c";
      case "Disconnected": return "#ef4444";
    }
  }, [connectionState]);

  useEffect(() => {
    fetchUserById("01H6BZB5F4B6GTKSJCV6TRGZ22").then(setUser);
    fetchAccountById("01H6BZB5F4B6GTKSJCV6TRGZ22").then(setAccount);

    setTimeout(() => setConnectionState("Connected"), 1000);
  }, []);

  return account ? (
    <div className="flex flex-col gap-2">
      <Card className="flex flex-row justify-end pr-2 h-[40px]">
        <CardDescription className="flex flex-row gap-2 items-center">
          <span className="flex flex-row items-center gap-1">
            {connectionState}
            <Circle color={connectionColour} fill={connectionColour} />
          </span>
        </CardDescription>
      </Card>
      <div className="flex flex-col gap-2">
        <UserReviewCard user={user ?? undefined} account={account} />
        <UserReviewCard user={undefined} account={account} />
      </div>
    </div>
  ) : null;
}
