import Page from "@/components/page";
import TeamProfile from "@/features/teams/components/team-profile";
import { teamQueries } from "@/features/teams/queries";
import { redirect, createFileRoute } from "@tanstack/react-router";
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;
    const team = await queryClient.ensureQueryData(teamQueries.details(params.teamId))
    if (!team) throw redirect({ to: '/' });
    return { team }
  },
  loader: ({ params }) => ({
    header: {
      collapsed: true,
      withBackButton: true
    },
    refresh: {
      toRefresh: [teamQueries.details(params.teamId).queryKey],
    }
  }),
  component: () => {
    const { team } = Route.useRouteContext();
    return <Page><TeamProfile team={team} /></Page>
  },
})