import { createFileRoute } from '@tanstack/react-router'
import { tournamentQueries } from '@/features/tournaments/queries'
import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch'
import { Suspense } from 'react'
import TournamentCardList from '@/features/tournaments/components/tournament-card-list'
import { Skeleton, Stack } from '@mantine/core'
import { msg } from '@lingui/core/macro'

export const Route = createFileRoute('/_authed/tournaments/')({
  beforeLoad: async ({ context }) => {
    const { queryClient } = context;
    prefetchServerQuery(queryClient, tournamentQueries.list())
  },
  loader: () => ({
    header: {
      withBackButton: true,
      title: msg`Tournaments`,
    },
    refresh: tournamentQueries.list().queryKey
  }),
  component: RouteComponent,
})

function RouteComponent() {
  return <Suspense fallback={<Stack gap="md">
    {Array(10).fill(null).map((_, index) => (
      <Skeleton
        key={`tournament-card-skeleton-${index}`}
        height="120px"
        w="100%"
        radius="md"
        style={{ opacity: Math.max(1 - index * 0.08, 0.35) }}
      />
    ))}
  </Stack>}>
    <TournamentCardList />
  </Suspense>
}
