// ==UserScript==
// @name         SportWanninger OrderNotes
// @namespace    http://sportwanninger.de/
// @version      2025-03-25
// @updateURL    https://git.sportwanninger.de/Public/UserScripts/raw/branch/master/SportWanninger_OrderNotes.user.js
// @downloadURL  https://git.sportwanninger.de/Public/UserScripts/raw/branch/master/SportWanninger_OrderNotes.user.js
// @description  Vordefinierte Notizen für Smart.Order
// @author       Christian Schmied <cs@sport-wanninger.de>
// @match        https://vororder.intersport.de/*
// @match        https://nachorder.intersport.de/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=intersport.de
// @grant        none
// ==/UserScript==

const DEBUG = false;

const ISWOptions = [{
        name: "NOTE",
        type: "textarea",
        body: true
    },
    {
        name: "NO_ONLINE",
        type: "checkbox"
    },
    {
        name: "NO_MARKET",
        type: "checkbox"
    },
    {
        name: "Z-FLYER",
        type: "checkbox"
    },
    {
        name: "HausPreis",
        type: "price"
    },
    {
        name: "OriginalPreis",
        type: "price"
    },
];

var observeDOM = (function() {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    return function(obj, callback) {
        if (!obj || obj.nodeType !== 1) {
            return;
        }

        if (MutationObserver) {
            // define a new observer
            var mutationObserver = new MutationObserver(callback);

            // have the observer observe for changes in children
            mutationObserver.observe(obj, {
                childList: true,
                subtree: true
            });
            return mutationObserver;
        } else if (window.addEventListener) { // browser support fallback
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    }
})();

function debounce(func, timeout = 300) {
    let timer
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            // @ts-ignore ignore this of type any;
            func.apply(this, args)
        }, timeout);
    }
}

var debouncedEvaluate = debounce(evaluateForNoteFields)

function evaluateForNoteFields() {
    let noteContainer = document.getElementsByClassName("note-container");
    console.log(`found ${noteContainer.length} note Containers`);

    if (noteContainer.length !== 1) {
        return
    }

    let textArea = noteContainer[0].getElementsByClassName("note-input");
    let selectionList = noteContainer[0].getElementsByClassName("isw-note-selection");

    if (selectionList.length === 0) {
        if (!DEBUG) {
            textArea[0].parentNode.style.height = "0px";
            textArea[0].parentNode.style.padding = "0px";
            textArea[0].parentNode.style.border = "0px";
            textArea[0].style.height = "0px";
        }
        textArea[0].disabled = true;
        textArea[0].addEventListener("change", (e) => console.log("Hi ;D", e));
        addSelectionList(noteContainer[0], textArea[0]);
    }
}

const templateHead = '<div class="isw-note-selection" style="display: flex; flex-direction: column">';
const templateFoot = '</div>';

function addSelectionList(parent, textArea) {
    const template = document.createElement('template');
    var tBody = "";
    for (const option of ISWOptions) {
        if (option.type === "price") {
            tBody += `<label>${option.name}<input class="isw-input" type="number" min="0" step="0.01" style="margin-left: .5em; border: 1px solid #c6c6c6; border-radius: 0.25em;" name="isw-option-${option.name}" data-name="${option.name}" data-type="${option.type}"/></label>`
        } else if (option.type === "text") {
            tBody += `<label>${option.name}<input class="isw-input" type="text" style="margin-left: .5em; border: 1px solid #c6c6c6; border-radius: 0.25em;" name="isw-option-${option.name}" data-name="${option.name}" data-type="${option.type}"/></label>`
        } else if (option.type === "textarea") {
            tBody += `<label>${option.name}
            <textarea class="isw-input" style="margin-left: .5em; border: 1px solid #c6c6c6; border-radius: 0.25em;"
            name="isw-option-${option.name}" data-name="${option.name}" data-type="${option.type}" data-body="true"
            >
            </textarea>
            </label>`
        } else {
            tBody += `<label><input class="isw-input" type="checkbox" style="margin-right: .5em;" name="isw-option-${option.name}" data-name="${option.name}" data-type="${option.type}"/>${option.name}</label>`
        }
    }
    template.innerHTML = templateHead + tBody + templateFoot;
    var allInputs = template.content.firstChild.getElementsByClassName("isw-input");
    for (const input of allInputs) {
        input.onchange = handleIswChange(textArea);
        input.oninput = handleIswChange(textArea);
    }
    parent.insertBefore(template.content.firstChild, textArea.parent);
    updateFromTextArea(textArea, parent.getElementsByClassName("isw-note-selection")[0]);
}

function handleIswChange(textArea) {
    return (event) => {
        console.log(event);

        const name = event.target.getAttribute("data-name");
        const type = event.target.getAttribute("data-type");
        const body = event.target.getAttribute("data-body");

        var value = event.target.value;

        if (type === "checkbox") {
            value = event.target.checked;
        } else if (type === "price") {
            value = parseFloat(value);
        }

        console.log("handleIswChange", name, value);

        if (body === "true") {
            setOtherValue(textArea, value);
        } else {
            setPropertyValue(textArea, name, value);
        }
    }
}

function updateFromTextArea(textArea, fieldSet) {
    const { obj, other } = parseTextArea(textArea);
    const inputs = fieldSet.getElementsByClassName("isw-input");
    for (const input of inputs) {
        const name = input.getAttribute("data-name");
        const type = input.getAttribute("data-type");
        const body = input.getAttribute("data-body");
        if (body === "true") {
            input.value = other
        } else {
            if (type === "checkbox") {
                input.checked = obj[name] || false;
            } else {
                input.value = obj[name] || "";
            }
        }
    }
}

function parseTextArea(textArea) {
    const split = textArea.value.split("\n");
    var jsonString = split[0];
    var obj = {};
    if (jsonString.length > 0 && jsonString.charAt(0) == "{") {
        obj = JSON.parse(jsonString);
    } else {
        return {
            obj: obj,
            other: textArea.value.trim()
        };
    }

    var other = "";
    if (split.length > 1) {
        other = split.slice(1);
    }

    return {
        obj: obj,
        other: other
    };
}

function setPropertyValue(textArea, name, value) {
    const {
        obj,
        other
    } = parseTextArea(textArea);
    console.log("PropValue: other:" + other);

    if (value === false || value === 0) {
        obj[name] = undefined;
    } else {
        obj[name] = value;
    }

    updateTextAreaValue(textArea, obj, other);
}

function setOtherValue(textArea, newOther) {
    const { obj } = parseTextArea(textArea);

    updateTextAreaValue(textArea, obj, newOther);
}

function updateTextAreaValue(textArea, obj, other) {
    var jsonString = JSON.stringify(obj);

    if (jsonString === "{}") {
        jsonString = "";
    }

    var fullString = jsonString;
    if (other.length > 0) {
        fullString += "\n" + other;
    }

    textArea.value = fullString.trim();

    var e = new Event('input', {
        bubbles: true,
        cancelable: true,
    });
    textArea.dispatchEvent(e);
}


(function() {
    'use strict';

    observeDOM(document.getElementById("__nuxt"), debouncedEvaluate);
})();