import Page from "@/components/page";
import Profile from "@/features/players/components/profile";
import { playerQueries } from "@/features/players/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/profile/$playerId")({
  validateSearch: searchSchema,
  beforeLoad: async ({ params, context }) => {
    const { queryClient } = context;
    const player = await queryClient.ensureQueryData(playerQueries.details(params.playerId))
    if (!player) throw redirect({ to: '/' });
    return {
      player
    }
  },
  loader: ({ params, context }) => ({
    header: {
      collapsed: true,
      withBackButton: true,
      settingsLink: context?.auth.user.id === params.playerId ? 'settings' : undefined
    },
    refresh: [playerQueries.details(params.playerId).queryKey]
  }),
  component: () => {
    const { player } = Route.useRouteContext();
    return <Profile player={player} />
  },
})