import { Title } from "@solidjs/meta";
import { action, cache, createAsync, useAction, reload } from "@solidjs/router";

const getX = cache(async () => {
  "use server";
  return Math.random().toFixed(5);
}, "preload");

const getY = cache(async () => {
  "use server";
  return Math.random().toFixed(5);
}, "no-preload");

const update$ = async (explicit = false) => {
  "use server"
  if (explicit) {
    throw reload({
      revalidate: [getY.keyFor(), getX.keyFor()],
    });
  }
};

const update = action(update$);
const updateWrapped = action((args?) => update$(args))

const preloadX = false;

const buttonStyle = "font-size:1.5rem;padding:0.1rem 0.9rem;"

export const route = {
  load: async () => {
    preloadX && await getX();
  },
};

export default function Home() {
  const x = createAsync(() => getX());
  const y = createAsync(() => getY());

  const myReload = useAction(update);
  const myReloadWrapped = useAction(updateWrapped);

  return (
    <main>
      <Title>About</Title>
      <h1>Preload X: {preloadX + ""}</h1>
      <div style="display: flex; gap: 1rem; justify-content: center;">
        <button style={buttonStyle} onClick={() => myReload()}>
          1. Just Update
        </button>
        <button style={buttonStyle} onClick={() => myReload(true)}>
          2. Explicit revalidate
        </button>
        <button style={buttonStyle} onClick={() => myReloadWrapped()}>
          3. wrapped server function
        </button>
        <button style={buttonStyle} onClick={() => myReloadWrapped(true)}>
          4. Wrapped server function & explicit revalidate
        </button>
      </div>
      <pre style="font-size:2rem;">
        x: {x()}
        {"\n"}
        y: {y()}
      </pre>
    </main>
  );
}