import React from "react";
import { createRoot } from "react-dom/client";
import { createHashRouter, RouterProvider } from "react-router-dom";
import Root from "./root";
import List from "./pages/list";
import Echo from "./pages/echo";

const router = createHashRouter([
    {
        path: "/",
        element: <Root />,
        // loader: rootLoader,
        children: [
            {
                path: "",
                element: <List />,
                loader: () => {
                    return fetch("/api/list").then((x) => x.json());
                },
            },
            {
                path: "e/:echoID",
                element: <Echo />,
                loader: async ({ params }) => {
                    const echoData = await fetch(
                        `/api/e?e=${params.echoID}&limit=10`
                    ).then((x) => x.json());
                    let echo = [];
                    if (echoData[params.echoID]) {
                        echo = echoData[params.echoID];
                    }
                    const messages = await fetch(
                        `/api/m?e=${params.echoID}`
                    ).then((x) => x.json());

                    return { echo, messages: messages.reverse() };
                },
            },
        ],
    },
]);

const root = createRoot(document.getElementById("app"));
root.render(
    <RouterProvider
        router={router}
        fallbackElement={<article aria-busy="true">Загрузка</article>}
    />
);