import React from "react";
import { styled } from "@stitches/react";
import { YithProvider } from "./context/yith-context";
import { Manifest } from "./components/Manifest";
import { Annotation } from "./components/Annotation";
import { Canvas } from "./components/Canvas";
import { Presentation, Projection } from "./screens";
import { uuid } from "./services/uuid";
const Yith = (props) => {
    const { type, preview, text, children } = props;
    const instance = `yith-${uuid()}`;
    let sequence = {
        id: instance,
        items: [],
    };
    // todo: write this as a hook OR two
    const clonedManifests = React.Children.toArray(children).map((manifest) => {
        // add manifest to sequence
        sequence.items.push({
            id: manifest.props.id,
            type: "Manifest",
        });
        if (manifest.props.children)
            manifest.props.children.forEach((child) => {
                sequence.items.push({
                    id: child.props.id,
                    type: child.type.name,
                    manifestId: manifest.props.id,
                });
            });
        // clone and add instance/type
        const clonedManifest = React.cloneElement(manifest, {
            instance,
            preview,
            text,
            type,
        });
        return clonedManifest;
    });
    const screen = (type) => {
        switch (type) {
            case "presentation":
                return React.createElement(Presentation, { children: clonedManifests });
            case "projection":
                return React.createElement(Projection, { children: clonedManifests });
            default:
                return (React.createElement("span", null,
                    "Error rendering screen type ",
                    React.createElement("strong", null, type),
                    "."));
        }
    };
    return (React.createElement(YithProvider, { sequence: sequence },
        React.createElement(Screen, null, screen(type))));
};
Yith.Annotation = Annotation;
Yith.Canvas = Canvas;
Yith.Manifest = Manifest;
const Screen = styled("div", {
    fontFamily: "inherit, system-ui, -apple-system, Helvetica, Arial, sans-serif",
    display: "flex",
    alignItems: "flex-start",
});
export default Yith;
//# sourceMappingURL=index.js.map