import TeamProfile from "@/features/teams/components/team-profile";
import ProfileSkeleton from "@/features/teams/components/team-profile/skeleton";
import { teamKeys, teamQueries } from "@/features/teams/queries";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import { createFileRoute } from "@tanstack/react-router";
import { Suspense } from "react";
import { z } from "zod";

const searchSchema = z.object({
  tab: z.string().optional(),
});

export const Route = createFileRoute("/_authed/teams/$teamId")({
  validateSearch: searchSchema,
  beforeLoad: async ({ params, context }) => {
    const { queryClient } = context;
    await prefetchServerQuery(queryClient, teamQueries.details(params.teamId));
  },
  loader: ({ params }) => ({
    header: {
      collapsed: true,
      withBackButton: true,
    },
    refresh: [teamKeys.details(params.teamId), teamKeys.matches(params.teamId), teamKeys.stats(params.teamId)],
    withPadding: false
  }),
  component: () => {
    const { teamId } = Route.useParams();
    return <Suspense fallback={<ProfileSkeleton />}>
      <TeamProfile id={teamId} />
    </Suspense>;
  },
});
