// This is a userscript to make the flagselector more bearable
// For Archival Purpose (I did not make this)
// Source code checks out
// ==UserScript==
// @name         Improved Waifu Flag Selection
// @namespace    http://example.org/improved_waifu_flag_sel
// @version      1.0.3
// @description  Improved flag selection for /mlp/ (icons, search, etc)
// @author       Anonymous
// @license      MIT
// @match        https://boards.4channel.org/mlp/*
// @icon         https://icons.duckduckgo.com/ip2/4channel.org.ico
// @resource     cssMain https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css
// @resource     cssFlags https://s.4cdn.org/image/flags/mlp/flags.1.css
// @require      https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js
// @require      https://openuserjs.org/src/libs/soufianesakhi/node-creation-observer.js
// @grant        GM_getResourceText
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    /*global Choices, NodeCreationObserver*/
    GM_addStyle(GM_getResourceText("cssMain"));
    GM_addStyle(`
        .choices__inner {
            box-sizing: border-box;
            padding: 0 !important;
            min-height: 25px !important;
        }
        .choices[data-type*="select-one"] .choices__inner {
            padding-bottom: 0px !important;
        }
        .choices[data-type*="select-one"] .choices__input {
            padding: 3px !important;
        }
        .choices__list--dropdown .choices__item {
            padding: 3px !important;
        }
        .bfl-0 {
            visibility: hidden;
        }
        #qr > form {
            overflow-y: visible !important;
            overflow-x: visible !important;
        }
        `);
    if (document.querySelector('link[rel="stylesheet"][href*="flags"]') === null) {
        GM_addStyle(GM_getResourceText("cssFlags"));
    }

    let clonedFlagSelector;
    let myNodeList = document.querySelectorAll('.flagSelector');
    for (let i = 0; i < myNodeList.length; i++) {
        let flagSelectorElem = myNodeList[i];
        if (i == 0) {
            clonedFlagSelector = flagSelectorElem.cloneNode(true);
        }
        createChoices(flagSelectorElem, 'choices ponyFlagChoices');
        console.log("i=" + i);
    }

    function createChoices(flagSelectorElem, outerClass) {
        const choices = new Choices(flagSelectorElem, {
            searchResultLimit: 80,
            searchPlaceholderValue: "Search pony",
            noResultsText: 'No ponies found',
            itemSelectText: '',
            shouldSort: false,
            classNames: {
                containerOuter: outerClass,
            },
            fuseOptions: {
                includeMatches: true,
                includeScore: true,
                threshold: 0.1,
                distance: 600
            },
            callbackOnCreateTemplates: () => ({
                choice: (...args) => {
                    const choiceDefault = Choices.defaults.templates.choice.call(this, ...args);
                    addIcon(choiceDefault, ...args);
                    return choiceDefault;
                },
                item: (...args) => {
                    const itemDefault = Choices.defaults.templates.item.call(this, ...args);
                    addIcon(itemDefault, ...args);
                    return itemDefault;
                }
            }),
        });
        flagSelectorElem.addEventListener(
            'choice',
            function(event) {
                setBoardFlag(event.detail.choice.value);
            },
            false,
        );
        choices.setChoiceByValue(getBoardFlag());
        return choices;
    }

    function addIcon(templateElement, ...args) {
        console.log(args[1]);
        const icon = document.createElement("span");
        icon.classList.add("bfl", "bfl-" + args[1].value.toLowerCase());
        const space = document.createTextNode(" ");
        templateElement.prepend(icon, space);
    }

    //#qrForm > #qrCaptchaContainer + div > .flagSelector,
    let isObserve = true;
    NodeCreationObserver.onCreation("#qrForm > #qrCaptchaContainer + div > .ponyFlagChoices", (node) => {
        if (isObserve) {
            isObserve = false;
            let curFlagSelector = clonedFlagSelector.cloneNode(true);
            node.parentNode.appendChild(curFlagSelector);
            node.remove();
            createChoices(curFlagSelector, 'choices');
            isObserve = true;
        }
    });
    NodeCreationObserver.onCreation("#qr > form > .flagSelector", (node) => {
        if (isObserve) {
            isObserve = false;
            createChoices(node, 'choices');
            isObserve = true;
        }
    });

    function setBoardFlag(value) {
        var curBoardFlagKey = "4chan_flag_" + location.pathname.split(/\//)[1];
        "0" === value ? localStorage.removeItem(curBoardFlagKey) : localStorage.setItem(curBoardFlagKey, value);
    }

    function getBoardFlag() {
        var curBoardFlagKey = "4chan_flag_" + location.pathname.split(/\//)[1];
        return localStorage.getItem(curBoardFlagKey) || "0";
    }

    // .flagSelector
})();