import { useState } from "react";
import { useInterface, useMutationFeedback } from "@quixos/camino-react";
import { LocalInput } from "@quixos/camino-react/ui";
import { interfaces, type Modules } from "./gen/client.js";
import "./editor.css";
const names = { name: interfaces.WebStudioCanvas.name };
export const Editor: Modules["Editor"] = ({ subject, input }) => {
  const operations = useInterface(names, subject);
  const [draft, setDraft] = useState("");
  const feedback = useMutationFeedback();
  return (
    <section>
      <h2>{input.body.root.name}</h2>
      <label>
        Name
        <LocalInput value={draft} onChange={(e) => setDraft(e.target.value)} />
      </label>
      <button
        disabled={operations.status !== "ready"}
        onClick={() => {
          if (operations.status === "ready") feedback.track(operations.value.name.set(draft));
        }}
      >
        Save name
      </button>
      <p>{input.body.root.placements.entries.length} placements in this view</p>
      <ul>
        {input.body.root.placements.entries.map(({ node }, i) => (
          <li key={i}>
            {node.presentation} · {node.subject._camino.ref.object}
          </li>
        ))}
      </ul>
      {feedback.message && <p role="alert">{feedback.message}</p>}
    </section>
  );
};