// public/packages/excalidraw/index.js
// This version fetches initial data from /api/state and saves changes back.
// Make sure your Go server (from previous snippets) is running and serving /api/state.
// Assumes a simple backend that returns/accepts JSON of the Excalidraw file.

const { useState, useEffect } = React;

function App() {
  const [initialData, setInitialData] = useState(null);

  useEffect(() => {
    fetch("/api/state")
      .then((res) => {
        console.log("Fetch response:", res);
        return res.json();
      })
      .then((data) => {
        console.log("Fetched data:", data);
        setInitialData(data);
      })
      .catch((err) => {
        console.error("Error loading initial data:", err);
        setInitialData({});
      });
  }, []);

  const handleChange = (elements, appState) => {
    const data = {
      type: "excalidraw",
      version: 2,
      source: "excalidraw",
      elements: elements,
      appState: appState,
      files: {},
    };

    fetch("/api/state", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    }).catch(console.error);
  };

  return React.createElement(
    "div",
    { style: { height: "100vh" } },
    initialData &&
      React.createElement(ExcalidrawLib.Excalidraw, {
        initialData: initialData,
        onChange: handleChange,
      }),
  );
}

const excalidrawWrapper = document.getElementById("app");
const root = ReactDOM.createRoot(excalidrawWrapper);
root.render(React.createElement(App));