import {json, type LoaderArgs} from '@shopify/remix-oxygen';
import type {SanityProductPage} from '~/lib/sanity';

const QUERY = `*[_type == 'product' && slug.current == $slug]`;

export async function loader({params, context}: LoaderArgs) {
  const cache = context.storefront.CacheLong();

  const sanityContent = await context.sanity.query<SanityProductPage>({
    query: QUERY,
    params: {
      slug: params.handle,
    },
    cache,
  });

  return json({sanityContent});
}

// <root>/app/routes/($lang).products.$handle.tsx
import {useLoaderData} from '@remix-run/react';
import {json, type LoaderArgs} from '@shopify/remix-oxygen';
import type {SanityProductPage} from '~/lib/sanity';

const QUERY = `*[_type == 'product' && slug.current == $slug]`;

export async function loader({params, context}: LoaderArgs) {
  const sanityContent = await context.sanity.client.fetch<SanityProductPage>(
    QUERY,
    {
      slug: params.handle,
    },
  );

  return json({sanityContent});
}
export default function Product() {
  const {sanityContent} = useLoaderData<typeof loader>();

  // ...
}

// <root>/app/routes/($lang).products.$handle.tsx
import {Suspense} from 'react';
import {Await, useLoaderData} from '@remix-run/react';
import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
import type {SanityProductPage, LessImportant} from '~/lib/sanity';

const QUERY = `*[_type == 'product' && slug.current == $slug]`;
const ANOTHER_QUERY = `*[references($id)]`;

export async function loader({params, context}: LoaderArgs) {
  /* Await the important content here */
  const sanityContent = await context.sanity.query<SanityProductPage>({
    query: QUERY,
    params: {
      slug: params.handle,
    },
  });

  /* This can wait - so don't await it - keep it as a promise */
  const moreSanityContent = context.sanity.query<LessImportant>({
    query: ANOTHER_QUERY,
    params: {
      id: sanityContent._id,
    },
  });

  return defer({sanityContent});
}
export default function Product() {
  const {sanityContent, moreSanityContent} = useLoaderData<typeof loader>();

  return (
    <div>
      <Content value={sanityContent} />
      {/* Wrap promises in a Suspense fallback and await them */}
      <Suspense fallback={<Spinner />}>
        <Await resolve={moreSanityContent}>
          {(content) => <MoreContent value={content} />}
        </Await>
      </Suspense>
    </div>
  );
}

// <root>/app/routes/($lang)._index.tsx
export async function loader({context, params}: LoaderArgs) {
  // Fetch initial snapshot to render, in preview mode this will include a token in the request
  const page = await context.sanity.client.fetch<SanityHomePage>(QUERY);

  // ...rest of loader

  return json({
    page,
    // ...other loader data
  });
}

export default function Index() {
  const {page} = useLoaderData<typeof loader>();
  // In preview mode, use preview component
  const Component = usePreviewComponent<{page: SanityHomePage}>(Route, Preview);

  return <Component page={page} />;
}

function Route({page}: {page: SanityHomePage}) {
  return (
    <>
      {/* Page hero */}
      {page?.hero && <HomeHero hero={page.hero as SanityHeroHome} />}

      {page?.modules && (
        <div className={clsx('mb-32 mt-24 px-4', 'md:px-8')}>
          <ModuleGrid items={page.modules} />
        </div>
      )}
    </>
  );
}

function Preview(props: {page: SanityHomePage}) {
  const {usePreview} = usePreviewContext()!;
  // Query, resolving drafts, and listen for new changes
  const page = usePreview(HOME_PAGE_QUERY, undefined, props.page);

  return <Route page={page} />;
}