// ==UserScript==
// @name         SportWanninger OrderNotes
// @namespace    http://tampermonkey.net/
// @version      2024-11-28
// @description  Vordefinierte Notizen für Smart.Order
// @author       Christian Schmied <cs@sport-wanninger.de>
// @match        https://vororder.intersport.de/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=intersport.de
// @grant        none
// ==/UserScript==

const ISWOptions = [
    {name: "NO_ONLINE"},
    {name: "NO_MARKET"},
    {name: "Z-FLYER"},
    {name: "HausPreis", 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) {
        //textArea[0].style.display="none";
        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 += `<div>${option.name}<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}"/></label>`
        } else {
            tBody += `<label><input type="checkbox" style="margin-right: .5em;" name="isw-option-${option.name}" data-name="${option.name}"/>${option.name}</label>`
       }
    }
    template.innerHTML = templateHead + tBody + templateFoot;
    var allInputs = template.content.firstChild.getElementsByTagName("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("type");

        var value = event.target.value;

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

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

        setPropertyValue(textArea, name, value)
    }
}

function updateFromTextArea(textArea, fieldSet){
    const {obj} = parseTextArea(textArea);
    const inputs = fieldSet.getElementsByTagName("input");
    for (const input of inputs) {
        const name = input.getAttribute("data-name");
        const type = input.getAttribute("type");
        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);
    }

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

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

function setPropertyValue(textArea,name,value){
    const {obj, other} = parseTextArea(textArea);

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

    var jsonString = JSON.stringify(obj);

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

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

    textArea.value = fullString;

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

(function() {
    'use strict';

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