import $ from "./jquery.module.js";
import {shuffle} from "./shuffle.js";

let categoryTable = {};
let dropFunction = null;
let categoryBorderSize = "1vmin";

function setupCategoryDisplay(config) {
    let categoryImageIsBackground = "categoryImageIsBackground" in config.options;
    for (const category of config.categories) {
        if ("image" in category && !categoryImageIsBackground) {
            // Put image in category content, categoryTitle is caption if it exists
            let $categoryDiv = $(`#${category.categoryID} span`);
            let $categoryImage = $(`<img src="${category.image}" >`);
            $categoryDiv.append($categoryImage);
            if ("categoryTitle" in category) {
                let $categoryTitle = $(`<div class="category-caption">${category.categoryTitle}</div>`);
                $categoryDiv.append($categoryTitle);
            }
            $categoryDiv.css("pointer-events", "none"); // Prevents dragleave from being triggered by child
            categoryTable[category.categoryID] = category;
        }
        else {
            // If no image in category, or category image is background, categoryTitle itself is the content
            let $categoryDiv = $(`#${category.categoryID} span`);
            $categoryDiv.html(category.categoryTitle);
            $categoryDiv.css("pointer-events", "none"); // Prevents dragleave from being triggered by child
            if ("image" in category) {
                $categoryDiv.css("background-image", `url("${category.image}")`);
            }
            else if ("category_background_image" in config.options) {
                $categoryDiv.css("background-image", `url("${config.options.category_background_image}")`);
            }
            categoryTable[category.categoryID] = category;
        }
    }
    let $categoryDropArea = $(".category-div");
    $categoryDropArea.on("dragover", dragover);
    $categoryDropArea.on("drop", drop);
    $categoryDropArea.on("dragenter", dragEnter);
    $categoryDropArea.on("dragleave", dragLeave);

    if ("categoryBorderSize" in config.options) {
        categoryBorderSize = config.options.categoryBorderSize;
    }
}

function itemsByCategory(config) {
    // Create array of categories
    let categoryItems = {};

    for (const category of config.categories) {
        categoryItems[category.categoryID] = [];
    }

    for (const item of config.items) {
        categoryItems[item.categoryID].push(item);
    }

    let categoryEntries = Object.entries(categoryItems);

    if (config.options.randomizeItems) {
        shuffle(categoryEntries); // Shuffle categories
        for (const catItems of categoryEntries) {
            shuffle(catItems[1]); // Shuffle items for each category
        }
    }

    return categoryEntries;
}

function setDropFunction(currentDropFunction) {
    dropFunction = currentDropFunction;
}

function dragover(evt) {
    evt.preventDefault();
}

function drop(evt) {
    doHighlight($(evt.delegateTarget), false);
    dropFunction?.(evt, categoryTable[$(evt.delegateTarget).attr("id")].categoryID);
}

function dragEnter(evt) {
    doHighlight($(evt.delegateTarget), true);
    evt.preventDefault();
}

function dragLeave(evt) {
    doHighlight($(evt.delegateTarget), false);
}

function doHighlight($element, highlightOn) {
    if (highlightOn) {
        $element.css("border", `${categoryBorderSize} gold solid`);
    }
    else {
        $element.css("border", `${categoryBorderSize} black solid`);
    }
}


export {setupCategoryDisplay, itemsByCategory, setDropFunction};