import { LoaderFunctionArgs, useLoaderData } from "react-router";
import ApiSpecsService, { ApiSpecsDto } from "~/modules/api/services/ApiSpecsService";
import EditPageLayout from "~/components/ui/layouts/EditPageLayout";
import ApiSpecs from "~/modules/api/components/ApiSpecs";
import { verifyUserHasPermission } from "~/utils/helpers/.server/PermissionsService";
import { useTranslation } from "react-i18next";

type LoaderData = {
  apiSpecs: ApiSpecsDto;
};
export const loader = async ({ request }: LoaderFunctionArgs) => {
  await verifyUserHasPermission(request, "admin.apiKeys.view");
  const apiSpecs = await ApiSpecsService.generateSpecs({ request });
  const data: LoaderData = {
    apiSpecs,
  };
  return data;
};

export default function () {
  const data = useLoaderData<LoaderData>();
  const { t } = useTranslation();

  return (
    <EditPageLayout title={t("models.entity.apiDocs")}>
      <ApiSpecs item={data.apiSpecs} />
    </EditPageLayout>
  );
}