import { createFileRoute } from '@tanstack/react-router';

import { useAuth } from '@/components/auth-provider';
import { RootLayout } from '@/components/root-layout';
import { StoryOwnerPage } from '@/components/story-owner-page';
import { storyByIdQueryOptions } from '@/shared/queries';

export const Route = createFileRoute('/stories_/$storyId')({
  loader: ({ context: { queryClient }, params: { storyId } }) => {
    return queryClient.ensureQueryData(storyByIdQueryOptions(storyId));
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { storyId } = Route.useParams();

  const auth = useAuth();

  if (auth.isError) {
    return <>Story Guest Page</>;
  }

  return (
    <RootLayout>
      <StoryOwnerPage storyId={storyId} />
    </RootLayout>
  );
}