import { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom";
import {
	CanvasProvider,
	Wrapper,
	Interactive,
	Selector,
	Canvas,
	ShapeTree
} from "https://esm.sh/@grafikjs/react";

const json = [
	{
		tagName: "g",
		children: [
			{
				tagName: "rect",
				fill: "blue",
				stroke: "#000",
				strokeWidth: 2,
				width: 100,
				height: 100,
				left: -100,
				top: 0,
				angle: 45
			},
			{
				tagName: "rect",
				fill: "green",
				stroke: "#000",
				strokeWidth: 2,
				width: 100,
				height: 100,
				left: 100,
				top: 0,
				angle: 45
			}
		],
		left: 200,
		top: 200,
		angle: 0
	}
];

const TestApp = () => {
	return (
		<CanvasProvider>
			<Wrapper>
				<Canvas multiselection={false} width={400} height={400}>
					<ShapeTree json={json} />
				</Canvas>
				<Interactive />
			</Wrapper>
		</CanvasProvider>
	);
};

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<TestApp />);