/**
 * A MMT..whatever. Somewhere between the first and second "meta-" MMT had to leave common nomenclature behind
 * @typedef {{kind : string, uri: string}} MMTReference
 */
/**
 * Facts, as they are send by MMT. Not *quite* the same format as Unity uses \*sigh\*, and everything has shortened names to avoid five additional letters \*double sigh\*
 * @typedef {Object} MMTFact
 * @property {MMTReference} ref the reference MMT uses to identify this fact 
 * @property {string} label the human readable lable to display this fact. 
 * @property {?any} df the definition of the Fact. May be null for {@link MMTScroll.requiredFacts}
 * @property {?MMTReference} tp the MMT type of this fact
 * @property {string} kind since a Fact is a MMTThingy, they also have a {@link MMTReference.kind}
 */
/**
 * @typedef {Object} MMTScroll
 * @property {string} ref The MMT URI
 * @property {string} label The human-readable name
 * @property {string} description The description to be rendered here
 * @property {MMTFact[]} requiredFacts List of all facts required to apply the scroll. If the scroll has been partially applied these Facts may be the assigned ones
 * @property {MMTFact[]} acquiredFacts List of all facts that will be acquired when applying the scroll
 * @property {string} name Unity artifact; The URI again
 * @property {?string} path Unity artifact; will always be null
 */

let currentScrollRef = "" // ref of the scroll currently displayed 

function RenderScroll() {
    /** @type {MMTScroll} */
    const scroll = JSON.parse(document.querySelector("#Unity-Data-Interface").dataset.scrollDynamic);
    console.log(scroll.requiredFacts);
    const scrollContainer = document.querySelector("#scrollContainer");

    // replace the description if the scroll changed, otherwise only its content needs update
    if (scroll.ref != currentScrollRef) {
        currentScrollRef = scroll.ref;
        scrollContainer.innerHTML = scroll.description;
    }

    // go through the facts in the scroll, show their labels and add dropzones
    scroll.requiredFacts.forEach(fact => {
        $("[data-slot-id='" + fact.ref.uri + "']")
            .text(fact.label)
            .attr("dropzone", "copy")
            //.attr("data-fact-id", fact.df == null ? "" : fact.df.ref.uri)
    })

    // acquired facts only need updated labels
    scroll.acquiredFacts.forEach(fact => {
        $("[data-solution-id='" + fact.ref.uri + "']")
            .text(fact.label)
    })
    console.log(scroll.label + 'Scroll rendered')
}


$(function () {
    RenderScroll()
});