import * as React from 'react';
import {use, Suspense, useState, startTransition} from 'react';
import ReactDOM from 'react-dom/client';
import {createFromFetch, encodeReply} from 'react-server-dom-webpack/client';

// TODO: This should be a dependency of the App but we haven't implemented CSS in Node yet.
import './style.css';

let updateRoot;
async function callServer(id, args) {
  const response = fetch('/', {
    method: 'POST',
    headers: {
      Accept: 'text/x-component',
      'rsc-action': id,
    },
    body: await encodeReply(args),
  });
  const {returnValue, root} = await createFromFetch(response, {callServer});
  // Refresh the tree with the new RSC payload.
  startTransition(() => {
    updateRoot(root);
  });
  return returnValue;
}

function Shell({data}) {
  const [root, setRoot] = useState(data);
  updateRoot = setRoot;
  return root;
}

async function hydrateApp() {
  const {root, returnValue, formState} = await createFromFetch(
    fetch('/', {
      headers: {
        Accept: 'text/x-component',
      },
    }),
    {
      callServer,
    }
  );

  ReactDOM.hydrateRoot(document, <Shell data={root} />, {
    // TODO: This part doesn't actually work because the server only returns
    // form state during the request that submitted the form. Which means it
    // the state needs to be transported as part of the HTML stream. We intend
    // to add a feature to Fizz for this, but for now it's up to the
    // metaframework to implement correctly.
    formState: formState,
  });
}

// Remove this line to simulate MPA behavior
hydrateApp();
