export const Route = createFileRoute('/')({
  component: IndexComponent,
  beforeLoad: async ({ context }) => {
    const data = await userRequiredGuard()

    const orgId = data.session.activeOrganizationId
    if (!orgId) {
      throw redirect({
        to: "/unauthorized"
      })
    }

    const org = await context
      .queryClient
      .fetchQuery(orgQueryOptions.byId(orgId))

    return {
      orgId: data.session.activeOrganizationId,
      org,
      role: data.user.role
    }
  },
  loader: async ({ context }) => {
    await Promise.all([
      userCollection.preload(),
      teamCollection.preload(),
      groupCollection.preload(),
      roleCollection.preload(),
      gtpCollection.preload(),
    ]);
    return {
      orgId: context.orgId,
      org: context.org,
      role: context.role
    }
  }
})

function IndexComponent() {
  const rData = Route.useLoaderData()

  function useAllCollectionsReady(
    collections: Array<Collection<any, any, any, any, any>>
  ) {
    const [readyMap, setReadyMap] = createSignal(
      Object.fromEntries(collections.map(c => [c.id, false]))
    );
    collections.forEach((col) => {
      col.onFirstReady(() => {
        console.log("READY::", col.id)
        return setReadyMap(prev => ({ ...prev, [col.id]: true }))
      });
    });
    const allReady = createMemo(() => Object.values(readyMap()).every(Boolean));
    return { readyMap, allReady };
  }

  const vcCollectionsReady = useAllCollectionsReady([
    userCollection,
    groupCollection,
    roleCollection,
    teamCollection,
    gtpCollection
  ]);

  createEffect(() => {
    console.log("READY", vcCollectionsReady.allReady())
    console.log("MAP", vcCollectionsReady.readyMap())
    console.log(rData())
  })

  return (
    <Switch fallback={<PendingFull />}>
      <Match when={vcCollectionsReady.allReady()}>
        <Show when={rData().role === 'admin'}>
          <Navigate to="/admin" />
        </Show>
        <Show when={!rData().orgId}>
          <Navigate to="/unauthorized" />
        </Show>
        <Show when={rData().org}>
          <Navigate to="/$slug" params={{ slug: rData().org.slug }} />
        </Show>
      </Match>
    </Switch>
  )
}