import jQuery from "jquery";

Object.assign(window, { $: jQuery, jQuery });

require("select2/dist/js/i18n/cs");
import "select2/dist/js/select2.full";
import "select2/dist/css/select2.min.css";

$(window).ready(
    () => {
        $(".__vote-selection").select2({
            tags: true,
            tokenSeparators: [",", " "],
            // https://stackoverflow.com/a/28657702 - Thanks to Artur Filipiak!
            createTag: tag => {
                return {
                    id: tag.term,
                    text: tag.term,
                    isNew : true
                };
            }
        });

        $(".__vote-selection").on(
            "select2:select",
            event => {
                //// Sync the tag option with other selectors.

                // If the tag isn't new for this selection do nothing.
                if (!event.params.data.isNew) {
                    return;
                }

                const tagName = event.params.data.text;

                const addedTag = new Option(
                    tagName,
                    tagName,
                    false,
                    false
                );

                // Get all other selections.
                const unfilteredSelections = $(".__vote-selection").not(event.target);
                let filteredSelections = [];

                // Check if they contain the tag. If they do, ignore them.
                for (const selection of unfilteredSelections) {
                    if ($(selection).children(`option[value=${tagName}]`).length === 0) {
                        filteredSelections.push(selection);
                    }
                }

                // Add the new tag to all selections that don't have it yet.
                $(filteredSelections).append(addedTag).trigger("change");
            }
        );

        $(".__vote-selection").on(
            "select2:unselect",
            event => {
                //// Remove the tag option if it's not selected anywhere.

                const tagName = event.params.data.text;

                // Get all other selections.
                const selections = $(".__vote-selection");

                // Check if any of them have the tag selected. If they do, end the function.
                for (const selection of selections) {
                    for (const data of $(selection).select2("data")) {
                        if (data.selected && data.id == tagName) {
                            // Workaround - add the option back to this select (TODO - improve)
                            $(event.target).append(
                                new Option(
                                    tagName,
                                    tagName,
                                    false,
                                    false
                                )
                            ).trigger("change");

                            return;
                        }
                    }
                }

                // If the function has not ended by now, we can remove the tag.
                for (const selection of selections) {
                    $(selection).children(`option[value=${tagName}]`).remove();
                    $(selection).trigger("change");
                }
            }
        )

        $(".__vote-selection").on(
            "change.select2",
            event => {
                console.log("change");
            }
        );
    }
)