// JQUERY INIT

$(function () {

    function sendData(origin = ""){
        if(origin == ""){
            var total = $("#variationField1").val().split(',');
            var i;
            for (i = 0; i < total.length; ++i) {
                total[i]  = total[i].trim();
                total[i] = total[i].replace(/ /g, " ");
                total[i] = total[i].replace(".", "_");
                total[i] = total[i].replace(/ /g, "-");
            }
            var array1 = total;
            if ($( "#j_key" ).length) {
                var array2 = $("#j_key").val().split(',');
            }else{
                var array2 = [];
            }
            array1 = array1.filter(function(val) {
                return array2.indexOf(val) == -1;
            });
            var difference = [];
            difference = array2.filter(x => !total.includes(x));
            if(!difference){
                difference = [];
            }
            if(difference[0] != ""){
                var i;
                for (i = 0; i < difference.length; ++i) {
                    $("#att-"+difference[i]).remove();
                }
                $("#j_key").val(total);
            }
            var action = "with-variants";
        }else if(origin == "no-variants"){
            var action = "no-variants";
        }

        var urlData = $("#dataSet").data("url");
        $.ajax({
            url: urlData,
            type: "POST",
            data: {action: action, variant: array1, actual: total},
            dataType: "json",
            success: function (response) {
                $(".variants").append(response.html);
                $("#j_key").val(total);
            }
        });
    }


    $('.btn_confirm_variation').on("click", function (e) {
        e.preventDefault();
        var confirm = $(this).attr("id");
        if (confirm == "yes"){
            $("#card_variations").fadeIn("fast");
            $(".variants").html("");
        }else if(confirm == "no"){
            $("#card_variations").fadeOut("fast");
            $(".variants").html("");
            $("#j_key").val("");
            sendData("no-variants");
        }


    });

    $(".fileContent").on("click", ".j_action", function (e) {
        e.preventDefault();
        var url = $(this).attr("href");
        var action = $(this).data("action");
        var id = $(this).data("id");
        var unique_id = $(this).data("unique_id");
        $.ajax({
            url: url,
            type: "POST",
            data: {action: action, id: id, unique_id: unique_id},
            dataType: "json",
            success: function (response) {
                if(response.html != ""){
                    $(response.target).html(response.html);
                }
            }
        });

    });





    $('.tokenfield').on('tokenfield:createtoken', function (event) {
        var existingTokens = $(this).tokenfield('getTokens');
        $.each(existingTokens, function(index, token) {
            if (token.value === event.attrs.value) {
                event.preventDefault();
                return false;
            }
        });
    });

    var tags = [];
    tags = $("#card_variations").data("id").split(",");


    $('.tokenfield').tokenfield({
        autocomplete:{
            source: tags,
            delay: 100
        },
        showAutocompleteOnFocus: true
    }).on('tokenfield:removedtoken', function (e) {
        e.preventDefault();
        sendData();

    });



    $("#addVariant").on("click", function (e) {
        e.preventDefault();
        sendData();
    });



});