import { useData } from "aleph/react";
import "../style/index.css";

let count = 0;

export const data = {
  get: (req: Request) => {
    return new Response(JSON.stringify({ count }));
  },
  post: async (req: Request) => {
    const { action } = await req.json();
    if (action === "increase") {
      count++;
    } else if (action === "decrease") {
      count--;
    }
    return new Response(JSON.stringify({ count }));
  },
};

export default function Index() {
  const { data, isLoading, isMutating, mutation } = useData<{ count: number }>();
  return (
     <div className="counter">
      <span>Counter:</span>
      {isLoading && <em>...</em>}
      {!isLoading && <strong>{data?.count}</strong>}
      <button
        disabled={Boolean(isMutating)}
        onClick={() => mutation.post({ action: "decrease" }, "replace")}
      >-</button>
      <button
        disabled={Boolean(isMutating)}
        onClick={() => mutation.post({ action: "increase" }, "replace")}
      >+</button>
    </div>
  );
}

// server.tsx
import { renderToString } from "react-dom/server";
import { Router } from "aleph/react";
import { serve } from "aleph/server";

serve({
  config: {
    routeFiles: "./routes/**/*.tsx",
    atomicCSS: {
      presets: [presetWindi()]
    }
  },
  middlewares: [
    new Session({ cookieName: "session" }),
    new GithubAuth({ accessToken: "xxx" })
  ],
  fetch: (req, ctx) => {
    ctx.session.get("username");
  },
  ssr: (ctx) => {
    return renderToString(<Router ssrContext={ctx} />);
  },
});