let LastIndex = 0;

function submitJsonInVariableMap(){

    let root_of_current = $('.json_handler_variable_map_array');
    let textarea = root_of_current.find('.json_text_area');
    const sortableList = root_of_current.find('#variable_map_items_sortable_list');

    let arr = [];
    sortableList.children().each(function (i, li) {

        const card = $(li);
        let _id = card.find('.json_variable_map_id').text();
        let _variable = card.find('.json_variable_map_variable').text();
        let _variable_text = card.find('.js_variable_text_txt').val();
        let _icon = card.find('.js_icon_txt').val();

        let obj = {
            id: _id,
            variable: _variable,
            variable_text: _variable_text,
            icon: _icon
        };
        if(!li.classList.contains('no-item-found')){
            arr[i] = obj;
        }
    });

    let stringjs = JSON.stringify(arr);

    textarea.val(stringjs);

    notyf.open({
        type: 'info',
        message: 'ثبت انجام شد، برای اعمال نهایی بروی ذخیره کلیک کنید.'
    });
    
}

function submitJsonInVariableMapAndUpdateCurrentCard(){

    let submitBtn = $(this);
    let cardItem = submitBtn.closest('.global-json-handler-card');

    //update card header ui:
    let infoContainer = cardItem.find('.json_variable_map_box').find('.info-container');
    //update code (for first var map item creation):
    let varCodeUi = infoContainer.find('.json_variable_map_variable')
    let varCode = cardItem.find('.js_variable_txt').val();
    varCode = $.trim(varCode);

    if (!/^[A-Za-z_]+$/.test(varCode)) { 
        notyf.error('لطفا کد ویژگی را فقط با حروف انگلیسی و کاراکتر _ (UnderLine) و بدون فاصله وارد کنید.');
        return;
    }

    varCodeUi.html(varCode);
    //update text:
    let txtUi = infoContainer.find('.json_variable_map_variable_text')
    let text = cardItem.find('.js_variable_text_txt').val();
    txtUi.html(text);
    //update icon:
    let icoUi = infoContainer.find('.json_variable_map_icon')
    let icon = cardItem.find('.js_icon_txt').val();
    icoUi.removeClass();
    icoUi.addClass('json_variable_map_icon');
    icoUi.addClass(modifyIcon(icon));

    submitJsonInVariableMap();

    //collapse the card after save json:
    cardItem.addClass("collapsed-card");
    cardItem.find('.all_json_variable_map_edit_btn').show();
    cardItem.find('.card-body').slideUp();

}

function jsonVariableMapRowHtmlMacker(json , id = 0) { //dont use ids because ids cant be repeated in DOM
    let htmlRow = "";
    htmlRow += '<div class="json_variable_map_card card card-outline card-json-item collapsed-card global-json-handler-card">';
    htmlRow += '<div class="card-header json_variable_map_box">';
    htmlRow += '<div class="info-container">';
    htmlRow += '<div class="my-handle"><i class="ph ph-caret-up-down"></i></div>';
    htmlRow += '<span style="display:none" class="json_variable_map_id" >' + (json != null ? json['id'] : id) + '</span>';
    htmlRow += '<i class="json_variable_map_icon '+ (json != null ? modifyIcon(json['icon']) : "") +'" ></i>';
    htmlRow += '<span class="json_variable_map_variable_text" >' + (json != null ? json['variable_text'] : "-") + '</span>';
    htmlRow += '<span class="json_variable_map_variable" >' + (json != null ? json['variable'] : "-") + '</span>';
    htmlRow += '</div>';

    htmlRow += '<div class="card-tools2">';
    htmlRow += '<button type="button" class="all_json_variable_map_edit_btn btn btn-primary btn-sm"><i class="ph ph-pencil"></i></button>';
    htmlRow += '<button type="button" class="all_json_variable_map_delete_btn btn btn-danger btn-sm" '+(json != null && json['variable'] == "color" ? "disabled" : "")+'><i class="la la-trash"></i></button>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '<div class="card-body" style="display: none;">';
    
    if(json == null){
        htmlRow += textInputHtmlGenerator("", "js_variable_txt", "کد ویژگی");
        htmlRow += '<div class="notes bottom20">کد ویژگی باید بصورت انگلیسی و بدون فاصله یا اسپیس وارد شود </div>';
    }else{
        htmlRow += '<input style="display:none" type="text" class="js_variable_txt form-control" value="' + json['variable'] + '">';
    }

    htmlRow += textInputHtmlGenerator((json != null ? json['variable_text'] : ""), "js_variable_text_txt", "عنوان ویژگی");

    
    let iconClass = 'js_icon_txt';
    let iconId = 'cat-icon-' + (json != null ? json['id'] : id);
    let iconCode = (json != null ? json['icon'] : "");
    htmlRow += iconInputHtmlGenerator(iconCode, iconClass, iconId);

    htmlRow += '<span class="minitext">بعد از ایجاد تغییرات بروی این آیتم، بروی ثبت تغییرات کلیک کنید. دقت کنید ثبت تغییرات به معنی ذخیره در سرور نمیباشد</span>';
    htmlRow += '<div class="local_submit_parent">';
    htmlRow += '<span class="json_variable_map_submit_array btn btn-primary btn-sm">ثبت تغییرات</span>';
    htmlRow += '<span class="json_variable_map_cancel btn btn-gray btn-sm">انصراف</span>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';

    return htmlRow;
}

let editJsonVariableMapRowsBtn = function () {
    
    let root_card = $(this).closest('.global-json-handler-card');
    root_card.find('.card-body').show('slideDown');
    $(this).hide();

};

function modifyIcon(string){
    if(string.startsWith("pho-")) {
        return "pho phosphor-icons ph-" + string.substring(4);
    } else if (string.startsWith("mdi-")) {
        return "mdi mdi-" + string.substring(4);
    } else {
        return "mdi mdi-" + string;
    }
}

const deleteJsonVariableMapRowsBtn = function () {

    const root_card = $(this).closest('.global-json-handler-card');
    const sorable_list = $('#variable_map_items_sortable_list');

    Swal.fire({
        title: 'این آیتم را حذف میکنید؟',
        icon: '',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#007bff',
        confirmButtonText: 'حذف آیتم',
        cancelButtonText: 'انصراف'
    }).then((result) => {
        if (result.isConfirmed) {

            root_card.remove();

            submitJsonInVariableMap();

            if (sorable_list.children().length == 0) {
                const htmlrow = ThereIsNoRowHereHtml();
                $(".json_handler_variable_map_array").find(".showbox").find("#variable_map_items_sortable_list").html(htmlrow);
            }

        }

    })

};

const jsonVariableMapCancelBtn = function () {
    
    let card = $(this).closest('.json_variable_map_card');
    card.find('.all_json_variable_map_edit_btn').show();
    card.addClass("collapsed-card");
    let card_body = card.find('.card-body');
    card_body.slideUp();

};

$('#add_variable_map_array_item').click(function () {

    const root = $(this).parent();
    root.find('.no-item-found').remove();

    LastIndex += 1;
    const htmlrow = jsonVariableMapRowHtmlMacker(null, LastIndex);

    let obj = {
        id: LastIndex,
        variable: "",
        variable_text: "",
        icon: ""
    };

    let main_json = $('#variable_map');
    let main_json_text = main_json.val();
    if (main_json_text == '') {
        mainJsonVariableMapArrayObj = [];
    } else {
        mainJsonVariableMapArrayObj = JSON.parse(main_json_text);
    }
    mainJsonVariableMapArrayObj.push(obj);
    let stringjs = JSON.stringify(mainJsonVariableMapArrayObj);
    main_json.val(stringjs);

    root.find(".showbox").find("#variable_map_items_sortable_list").prepend(htmlrow);

    $('.all_json_variable_map_edit_btn').click(editJsonVariableMapRowsBtn);
    $('.all_json_variable_map_delete_btn').click(deleteJsonVariableMapRowsBtn);
    $('.json_variable_map_submit_array').off("click");
    //https://stackoverflow.com/a/9467172/4565796
    $('.json_variable_map_submit_array').click(submitJsonInVariableMapAndUpdateCurrentCard);
    $('.json_variable_map_cancel').click(jsonVariableMapCancelBtn);

});

function variableMapJsonSave() {

    let variable_map_data = $('#variable_map').val();

    if (
        (!variable_map_data) ||
        (variable_map_data.trim() == '') ||
        (variable_map_data.trim() == "") ||
        (variable_map_data.trim() == "null") ||
        (variable_map_data.trim() == "undefined") ||
        (variable_map_data.trim() == null)
    ) variable_map_data = "[]";

    //checkJsonForEmptyData:
    let error = false;
    let finalJsonString = $.trim(variable_map_data);
    let finalJson = JSON.parse(finalJsonString);
    $.each(finalJson, function(index, item) {
        if(item.variable=="" || item.variable=="-" || item.variable_text=="" || item.variable_text=="-"){
            error = true;
        }
    });

    if (error){
        notyf.error("لطفا مقادیر عنوان ویژگی و کد ویژگی را در آیتم جدید خود وارد نمایید");
        return;
    }

    let _toSave = {
        variable_map: finalJsonString
    }

    $.ajax({
        type: "POST",
        url: mpPanelBaseUrl + "/update-variable-map",
        data: _toSave,
        timeout: 25000,
        cache: false,
        success: function (data) {
            if (data == "ok") {
                notyf.success("ذخیره انجام شد");
                window.location.href = mpPanelBaseUrl + "/physical-store-settings/variable-map-management";
            } else {
                notyf.error(data);
            }
        },
        error: function (e) {
            notyf.error('Error: ' + e.responseText);
        }
    });
}

$(function () { // start of document ready:

    $('#variable_map_save').click(function () {
        Swal.fire({
            title: 'از ذخیره نگاشت ویژگی‌ها مطمئن هستید؟',
            text: '',
            icon: '',
            showCancelButton: true,
            confirmButtonColor: '#007bff',
            cancelButtonColor: '#909090',
            confirmButtonText: 'بله',
            cancelButtonText: 'انصراف'
        }).then((result) => {
            if (result.isConfirmed) {
                variableMapJsonSave();
            }
        })
    });

    $('.json_variable_map_cancel').click(jsonVariableMapCancelBtn);
    $(".json_handler_variable_map_array").on("click", ".icon_selector_box > .icon_box", function (e) {
        e.preventDefault();
        selectIconID = $(this).parent().find('.mppanel_icon_forms').prop('id');
        requestIcons();
    });
    $(".json_handler_variable_map_array").on("change", ".mppanel_icon_forms", function () {
        previewBoxIcon(this);
    });
    
    if ($(".json_handler_variable_map_array")[0]) { 

        const jsonString = $.trim($('.json_handler_variable_map_array > textarea').val());
        let jsonVariableMapArrayObj;

        if (jsonString == '') {
            jsonVariableMapArrayObj = [];
        } else {
            jsonVariableMapArrayObj = JSON.parse(jsonString);
        }

        if (jsonVariableMapArrayObj.length == 0) {
            const htmlrow = ThereIsNoRowHereHtml();
            $(".json_handler_variable_map_array").find(".showbox").find("#variable_map_items_sortable_list").html(htmlrow);
        } else {
            LastIndex = 0;
            $.each(jsonVariableMapArrayObj, function (key, value) {
                //console.log("vs: " + value);
                if(value['id']>LastIndex) LastIndex = value['id'];
                const htmlrow = jsonVariableMapRowHtmlMacker(value);
                $(".json_handler_variable_map_array").find(".showbox").find("#variable_map_items_sortable_list").append(htmlrow);
            });
        }

        $('.all_json_variable_map_edit_btn').click(editJsonVariableMapRowsBtn);
        $('.all_json_variable_map_delete_btn').click(deleteJsonVariableMapRowsBtn);
        $('.json_variable_map_submit_array').off("click");
        //https://stackoverflow.com/a/9467172/4565796
        $('.json_variable_map_submit_array').click(submitJsonInVariableMapAndUpdateCurrentCard);
        $('.json_variable_map_cancel').click(jsonVariableMapCancelBtn);
    }

    $('#variable_map_items_sortable_list').sortable({
        group: 'list',
        animation: 200,
        delay: 100, // time in milliseconds to define when the sorting should start
        delayOnTouchOnly: true, // only delay if user is using touch
        handle: ".my-handle", // Drag handle selector within list items
        ghostClass: 'ghost',
        onSort: submitJsonInVariableMap
    });

}); //end of jqury doc ready