import React from "react";
import { useYithState } from "context/yith-context";
import { getSequence } from "hooks/getSequence";
import { Modal } from "./UI/Modal";
export const Manifest = ({ id, instance, type, text, preview, }) => {
    const [manifest, setManifest] = React.useState();
    const state = useYithState();
    const { vault, sequences } = state;
    const sequence = getSequence(sequences, instance);
    React.useEffect(() => {
        vault
            .loadManifest(id)
            .then((data) => {
            setManifest(data);
        })
            .catch((error) => {
            console.log(`Manifest failed to load: ${error}`);
        });
    }, [id]);
    if (!manifest)
        return React.createElement(React.Fragment, null, "Loading...");
    /*
     * a hook here maybe should handle the below logic
     * retriving the content resource.
     */
    if (manifest) {
        const canvas = vault.fromRef(manifest.items[0]);
        const annotationPage = vault.fromRef(canvas.items[0]);
        const annotations = vault.allFromRef(annotationPage.items);
        const painting = annotations.filter((annotation) => {
            if (annotation.motivation)
                if (annotation.motivation[0] === "painting") {
                    const resource = vault.fromRef(annotation.body[0]);
                    annotation.body[0] = resource;
                    return annotation;
                }
        });
        // if (sequence[0].id !== id) return null;
        return (React.createElement(Modal, { manifest: manifest, painting: painting[0], sequence: sequence, type: type, text: text, preview: preview }));
    }
    return React.createElement(React.Fragment, null,
        "The manifest ",
        id,
        " failed to load.");
};
//# sourceMappingURL=Manifest.js.map