let steps = [
    {
        title: "Introduction",
        intro: "Welcome to the MySemCloud interface. This quick tour will guide you through the different parts of the application."
    },
    {
        position: "top",
        element: document.getElementById("svg-container"),
        title: "Initial word cloud layout",
        intro: "Here you can see the initial word cloud layout that our force-based algorithm has generated."
    },
    {
        element: document.getElementById("metrics"),
        title: "Metrics",
        intro: "As we aim for the word cloud to display the semantical relation between the words, we have chosen a set of metrics that we use to evaluate the quality of the layout."
    },
    {
        element: document.getElementById("metrics-box-realized-adjacencies"),
        title: "Metric 1",
        intro: "Realized Adjacencies are a weighted value which counts the number of word pairs that are semantically related and are placed next to each other in the word cloud vs. the total number of word pairs that are semantically related."
    },
    {
        element: document.getElementById("metrics-box-distortion"),
        title: "Metric 2",
        intro: "Distortion is a more complicated metric that takes into account the distances between the words and measures their correlation with the grade of semantical relation between them."
    },
    {
        element: document.getElementById("metrics-box-compactness"),
        title: "Metric 3",
        intro: "Compactness is a measure of how much space the words occupy in the word cloud. It is calculated by dividing the area of the word cloud by the area of the bounding rectangle."
    },
    {
        position: "top",
        element: document.getElementById("svg-container"),
        title: "Modifying the layout",
        intro: "You can modify and thus try to improve the layout by dragging the words around. Try it out! The metrics will be updated accordingly."
    },
    {
        element: document.getElementById("metrics-realized-adjacencies"),
        title: "Current Value",
        intro: "The large number in the middle shows the current value of the metric."
    },
    {
        element: document.getElementById("metrics-realized-adjacencies-prev-pill"),
        title: "Previous Value",
        intro: "This shows the value of the metric before the last modification."
    },
    {
        element: document.getElementById("metrics-realized-adjacencies-top-pill"),
        title: "Best Value",
        intro: "This shows the best value of the metric that has been achieved so far. Clicking on it will load the layout that achieved this value."
    },
    {
        position: "top",
        element: document.getElementById("svg-container"),
        title: "Improving the layout",
        intro: "But how can we know what moves to perform to improve the layout and achieve higher values for the metrics?"
    },
    {
        element: document.getElementById("metric-guides"),
        title: "Metric Guides",
        intro: "This is where our metric guides come into play. You can enable them for each metric and they will hint you in different ways how to improve the layout."
    },
    {
        element: document.getElementById("metric-guide-compactness"),
        title: "Metric Guide 1",
        intro: "The compactness metric guide is pretty simple. It shows the bounding box of the word cloud and highlights the words that are touching it. You can move these words inside the bounding box to improve the compactness.",
        myOnchange: function () {
            let checkbox = document.getElementById("checkbox-compactness");
            checkbox.checked = true;
            let changeEvent = new Event("input");
            checkbox.dispatchEvent(changeEvent);
        }
    },
    {
        myOnbeforechange: function () {
            let checkbox = document.getElementById("checkbox-compactness");
            checkbox.checked = false;
            let changeEvent = new Event("input");
            checkbox.dispatchEvent(changeEvent);
        },
        element: document.getElementById("metric-guide-adjacencies"),
        title: "Metric Guide 2",
        intro: "The realized adjacencies metric guide has two different views - a global view and a local view. What you can see here is the global view. The green links depict the realized adjacencies and their thickness shows the grade of semantical relation. The yellow links show the top 10 unrealized adjacencies, thus being potentially promising word pairs to move closer together.",
        myOnchange: function () {
            let checkbox = document.getElementById("checkbox-adjacencies");
            checkbox.checked = true;
            let changeEvent = new Event("input");
            checkbox.dispatchEvent(changeEvent);
        }

    },
    {
        element: document.getElementById("metric-guide-adjacencies"),
        title: "Metric Guide 2 - Local View",
        intro: "By right-clicking a word, you switch to the local view. Here, the top 10 unrealized adjacencies are not shown anymore and instead you can see all of the unrealized adjacencies of the specific word you picked.",
        onShown: function (tour) {
            // right click on a word with id "word0"
            var event = new MouseEvent("contextmenu", {
                view: window,
                bubbles: true,
                cancelable: true
            });
            document.getElementById("word0").dispatchEvent(event);
            // document.getElementById("checkbox-adjacencies").checked = true;
        },
        onHide: function (tour) {
            var event = new MouseEvent("contextmenu", {
                view: window,
                bubbles: true,
                cancelable: true
            });
            document.getElementById("word0").dispatchEvent(event);
            document.getElementById("checkbox-adjacencies").checked = false;
        },
        myOnchange: function () {
            // right click on a word with id "word0"
            var event = new MouseEvent("contextmenu", {
                view: window,
                bubbles: true,
                cancelable: true
            });
            document.getElementById("word0").dispatchEvent(event);
        }

    },
    {
        myOnbeforechange: function () {
            var event = new MouseEvent("contextmenu", {
                view: window,
                bubbles: true,
                cancelable: true
            });
            document.getElementById("word0").dispatchEvent(event);
            let checkbox = document.getElementById("checkbox-adjacencies");
            checkbox.checked = false;
            let changeEvent = new Event("input");
            checkbox.dispatchEvent(changeEvent);
        },
        element: document.getElementById("metric-guide-distortion"),
        title: "Metric Guide 3",
        intro: "The distortion metric guide at first highlights 5 words which contribute the most to bad distortion.",
        myOnchange: function () {
            let checkbox = document.getElementById("checkbox-distortion");
            checkbox.checked = true;
            let changeEvent = new Event("input");
            checkbox.dispatchEvent(changeEvent);
        }
    },
    {
        element: document.getElementById("metric-guide-distortion"),
        title: "Metric Guide 3 - Local View",
        intro: "When you right-click one of those words, you can see a heatmap with dark areas showing a possible location for the word which would improve the distortion.",
        myOnchange: function () {
            // find an element that has the class "boundingbox" and has a red stroke
            var element = Array.from(document.getElementsByClassName("boundingbox")).filter((e) => e.style.stroke == "red")[0].nextSibling;
            // right click on the element
            var event = new MouseEvent("contextmenu", {
                view: window,
                bubbles: true,
                cancelable: true
            });
            element.dispatchEvent(event);
        }
    },
    {
        myOnbeforechange: function () {
            // find an element that has the class "boundingbox" and has a red stroke
            var element = Array.from(document.getElementsByClassName("boundingbox")).filter((e) => e.style.stroke == "red")[0].nextSibling;
            // right click on the element
            var event = new MouseEvent("contextmenu", {
                view: window,
                bubbles: true,
                cancelable: true
            });
            element.dispatchEvent(event);
            let checkbox = document.getElementById("checkbox-distortion");
            checkbox.checked = false;
            let changeEvent = new Event("input");
            checkbox.dispatchEvent(changeEvent);
        },
        element: document.getElementById("movement-modes"),
        title: "Movement Modes",
        intro: "By default, if you manually move a word, it will just get placed at this new position and its previous neighbors are lost. Our movement modes change this behavior to make it easier to preserve the semantical relations."
    },
    {
        element: document.getElementById("movement-mode-neighbors"),
        title: "Movement Mode 1",
        intro: "If this mode is enabled, the word will drag some of its neighborhood with it. Whether a word from the neighborhood is dragged is based on the similarity values that the word has with the moved word."
    },
    {
        element: document.getElementById("movement-mode-holes"),
        title: "Movement Mode 2",
        intro: "This mode enforces a compaction of the hole layout after every move, attempting to fill any holes that might have been introduced."
    },
    {
        element: document.getElementById("btn-fill-holes"),
        title: "Filling holes",
        intro: "The hole filling process can also be envoked without performing a move by using this button."
    },
    {
        title: "All set!",
        intro: "You are now ready to use MySemCloud! If you want to dive into the theoretical background and technical details, feel free to check out the paper."
    },
]

let options = {
    dontShowAgain: true,
    showProgress: true,
    showBullets: false,
    steps: steps
}

let tutorial = introJs();
tutorial.setOptions(options);
tutorial.onbeforechange(function () {
    if (this._introItems[this._currentStep].myOnbeforechange) {
        this._introItems[this._currentStep].myOnbeforechange();
    }
}).onchange(function () {
    if (this._introItems[this._currentStep].myOnchange) {
        this._introItems[this._currentStep].myOnchange();
    }
});

export default tutorial;