import { createFileRoute } from '@tanstack/react-router'
import { tournamentQueries } from '@/features/tournaments/queries';
import Page from '@/components/page'
import { useQuery } from '@tanstack/react-query';
import { Box, Group, Title } from '@mantine/core';
import { useSheet } from '@/hooks/use-sheet';
import Sheet from '@/components/sheet/sheet';
import { Tournament } from '@/features/tournaments/types';
import TeamList from '@/features/teams/components/team-list';
import Button from '@/components/button';
import Avatar from '@/components/avatar';
import Profile from '@/features/tournaments/components/profile';

export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
  beforeLoad: async ({ context, params }) => {
    const { queryClient } = context;
    await queryClient.ensureQueryData(tournamentQueries.details(params.tournamentId))
  },
  loader: ({ params, context }) => ({
    header: {
      collapsed: true,
      withBackButton: true,
      settingsLink: context.auth.roles.includes("Admin") ? `/admin/tournaments/${params.tournamentId}` : undefined
    },
    refresh: {
      toRefresh: tournamentQueries.details(params.tournamentId).queryKey,
    }
  }),
  component: RouteComponent,
})

function RouteComponent() {
  const { data: tournament } = useQuery(tournamentQueries.details(Route.useParams().tournamentId));
  return <Page noPadding>
    <Profile tournament={tournament!} />
  </Page>
}

const TeamDrawer = ({ tournament }: { tournament: Tournament }) => {
  return (
    <TeamList teams={tournament?.teams!} />
  );
}