"use client";

import { Server, User } from "revolt-api";
import { ListCompactor } from "../../common/ListCompactor";
import { UserCard } from "../../cards/UserCard";
import { ServerCard } from "../../cards/ServerCard";
import Link from "next/link";

export function RelevantObjects({
  users,
  servers,
  userId,
}: {
  users: User[];
  servers: Server[];
  userId: string;
}) {
  return (
    <div className="flex gap-2">
      <div className="flex-1 min-w-0 flex flex-col gap-2">
        <h2 className="text-md text-center pb-2">Bots & Relations</h2>
        <ListCompactor
          data={[
            // for whatever fucking reason nextjs threw a bunch of errors at me
            // when i used .sort() here but i guess this works well enough..?
            ...users.filter((user) => user.bot?.owner == userId),
            ...users.filter((user) => user.bot?.owner != userId),
          ]}
          Component={({ item }) => (
            <Link href={`/panel/inspect/user/${item._id}`}>
              <UserCard
                user={item}
                subtitle={
                  item.bot?.owner == userId
                    ? "Owned bot"
                    : item.relations?.find((relation) => relation._id == userId)?.status || ""
                }
              />
            </Link>
          )}
        />
      </div>
      <div className="flex-1 min-w-0 flex flex-col gap-2">
        <h2 className="text-md text-center pb-2">Servers</h2>
        <ListCompactor
          // same as above
          data={[
            ...servers.filter((server) => userId == server.owner),
            ...servers.filter((server) => userId != server.owner),
          ]}
          Component={({ item }) => (
            <Link href={`/panel/inspect/server/${item._id}`}>
              <ServerCard
                server={item}
                subtitle={
                  [
                    userId === item.owner ? "Server Owner" : null,
                    item.discoverable ? "Discoverable" : null,
                  ].filter(i => i).join(" · ")
                }
              />
            </Link>
          )}
        />
      </div>
    </div>
  );
}