import { useState } from 'react';
import { json } from '@fatcherjs/middleware-json';
import { fatcher } from 'fatcher';
import { use, Suspense } from 'react';
function delay(ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
}

async function fetchMessage() {
  const response = await fatcher('https://test.com', {
    progressive: {
      isPlaceholder: value => value.startsWith('$$'),
    },
    middlewares: [
      json,
      () => {
        return new Response(
          new ReadableStream({
            async start(controller) {
              controller.enqueue(new TextEncoder().encode(JSON.stringify({ userInfo: '$$1' })));
              await delay(300);
              controller.enqueue(
                new TextEncoder().encode(
                  JSON.stringify({
                    $$1: { name: 'Alice', age: 18 },
                  }),
                ),
              );
              controller.close();
            },
          }),
        );
      },
    ],
  });

  return response.skeleton;
}

function UserInfo({ userInfoPromise }) {
  const userInfo = use(userInfoPromise);

  return userInfo ? `${userInfo.name} (${userInfo.age})` : 'loading...';
}

function Message({ skeleton }) {
  const data = use(skeleton);

  return (
    <p>
      Here is the message:{' '}
      <Suspense fallback={<p>⌛Downloading UserInfo...</p>}>
        <UserInfo userInfoPromise={data.userInfo} />
      </Suspense>
    </p>
  );
}

export default function App() {
  const [skeleton, setSkeleton] = useState(null);

  async function download() {
    setSkeleton(fetchMessage());
  }

  if (!skeleton) {
    return <button onClick={download}>Download message</button>;
  }

  return (
    <Suspense fallback={<p>⌛Downloading message...</p>}>
      <Message skeleton={skeleton} />
    </Suspense>
  );
}