import { ApiKeyWithEnvDto } from "@montelo/browser-client";
import { LoaderFunction, json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { withAuth } from "~/auth/withAuth";
import { ApiKeysPage } from "~/pages/apiKeys/ApiKeysPage";
import { sortApiKeys } from "~/utils/sorters";

export const loader: LoaderFunction = withAuth(async ({ api }) => {
  const apiKeyDtos = await api.apiKey.apiKeyControllerGetApiKeysForProject();
  return json<ApiKeyWithEnvDto[]>(apiKeyDtos);
});

export default function ApiKeysRoute() {
  const data = useLoaderData<ApiKeyWithEnvDto[]>();
  const sortedEnvironments = sortApiKeys(data || []);
  return <ApiKeysPage sortedEnvironments={sortedEnvironments} />;
}
