
function jsonType1ArrayRowHtmlMacker(disableImage, json) { //dont use ids because ids cant be repeated in DOM
    let imgStyle = '';
    if(disableImage) imgStyle = 'display:none';
    let htmlRow = "";
    htmlRow += '<div class="json_type1ar_card card card-outline card-json-item collapsed-card global-json-handler-card">';
    htmlRow += '<div class="card-header json_type1_box">';
    htmlRow += '<div class="my-handle"><i class="ph ph-caret-up-down"></i></div>';
    htmlRow += '<div class="json_type1_showimg_wrapper" style="'+imgStyle+'"><img class="json_type1_showimg" src="' + (json != null ? json['img'] : "") + '"></div>';
    htmlRow += '<div class="textcontainer">';
    
    let hideTextStyle = '';
    if(json == null) hideTextStyle = 'display:none';
    else if (json['text'] == "") hideTextStyle = 'display:none';
    htmlRow += '<span style="'+hideTextStyle+'" class="json_type1_showtext" >متن: ' + (json != null ? json['text'] : "-") + '</span>';
    
    let hideIntentStyle = '';
    if(json == null) hideIntentStyle = 'display:none';
    else if (json['intent_type'] == "") hideIntentStyle = 'display:none';
    htmlRow += '<span style="'+hideIntentStyle+'" class="json_type1_showintent" >' + getIntentName((json != null ? json['intent_type'] : "-")) + '</span>';
    
    htmlRow += '</div>';
    htmlRow += '<div class="card-tools">';
    htmlRow += '<button type="button" class="json_handler_box_opener_btn_ng btn btn-primary btn-sm" data-visibility="gone"><i class="arrow ph ph-caret-down"></i><i class="ph ph-pencil"></i></button>';
    htmlRow += '<button type="button" class="all_json_types_delete_btn btn btn-danger btn-sm"><i class="ph ph-trash"></i></button>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '<div class="card-body" style="display: none;">';
    
    let no_image_style = 'style="display:none"';
    let has_image_style = '';
    let json_image_url = json != null ? json['img'] : "";
    if(json_image_url == ""){
        no_image_style = '';
        has_image_style = 'style="display:none"';
    }
    let imgClass = 'js_type1_img';
    //let counter = json['id'];
    let counter = randomUID(21);
    
    htmlRow += '<div class="form-group newgen-form-group" style="'+imgStyle+'">';
    htmlRow += '<label class="mppanel_labels">تصویر: </label><div class="image_url_box super-file-select-box"><input id="cat-image-' + counter + '" type="text" class="'+imgClass+' form-control ltr mppanel_image_url" value="' + json_image_url + '">';
    htmlRow += '<div class="sfsb-wrapper">';
    htmlRow += '<div class="section-right"><div '+has_image_style+' class="image-wrapper"><a class="img-preview-a" target="_blank" href="'+json_image_url+'"><img class="img-preview" src="'+json_image_url+'"/></a></div><div '+no_image_style+' class="dropzone general_file_dropzone"></div></div>';
    htmlRow += '<div class="section-left"><span class="ffwrapper">فرمت‌های مورد قبول:<br><span class="fileformats">.png,.gif,.jpg,.jpeg,.webp</span></span><span '+has_image_style+' class="btn-remove-image">حذف و انتخاب مجدد</span><span '+no_image_style+' class="btn-select-image">انتخاب از مدیریت فایل</span></div>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';

    htmlRow += '<div class="form-group newgen-form-group text-group">';
    htmlRow += '<label class="mppanel_labels">متن: </label><input type="text" class="js_type1_txt form-control" value="' + (json != null ? json['text'] : "") + '">';
    htmlRow += '</div>';

    let intentType = (json != null ? json['intent_type'] : "-");
    let intentData = (json != null ? json['intent_data'] : "-");
    htmlRow += intentInputHtmlGenerator(intentType,intentData,"js_type1_intent_type","js_type1_intent_data");


    // htmlRow += '<div class="local_submit_parent">';
    // htmlRow += '<span class="json_type1_submit_array btn btn-primary btn-sm">ثبت تغییرات</span>';
    // htmlRow += '<span class="json_type1_cancel btn btn-gray btn-sm">انصراف</span>';
    // htmlRow += '</div>';

    htmlRow += '</div>';
    htmlRow += '</div>';

    return htmlRow;

}           

const deleteJsonRowsBtn = function () {

    const root_card = $(this).parent().parent().parent();
    const sortable_list = $(this).parent().parent().parent().parent();

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

            root_card.remove();
            if (sortable_list.children().length == 0) {
                const htmlrow = ThereIsNoRowHereHtml();
                $(".json_handler_type1_array").find(".showbox").find("#sortable_list_js_handler_typr1_array").html(htmlrow);
            }

            //refresh textarea data:
            jsonType1ArraySubmitBtnHandler(false);

        }

    })

};


const jsonType1CancelBtn = function () {

    let root_of_current = $(this).parent().parent().parent().parent().parent();
    let card = root_of_current.find('.global-json-handler-card');
    root_of_current.find('.json_handler_box_opener_btn').show();
    card.addClass("collapsed-card");
    let card_body = card.find('.card-body');
    card_body.slideUp();

};

function jsonType1ArraySubmitBtn(event) {

    //https://stackoverflow.com/a/9467172/4565796
    IsSingleItemEdit = event.data.IsSingleItemEdit;
    let card = $(this).parent().parent().parent();
    jsonType1ArraySubmitBtnHandler(IsSingleItemEdit, card);

};


function jsonType1ArraySubmitBtnHandler(IsSingleItemEdit, card, closeCard = true) {

    let root_of_current = $('.json_handler_type1_array');
    let textarea = root_of_current.find('.json_text_area');
    const sortableList = root_of_current.find('#sortable_list_js_handler_typr1_array');

    root_of_current.find('.json_handler_box_opener_btn').show();

    //if we edit only single row and submiting it:
    if (IsSingleItemEdit) {
        //let card = currentCard.parent().parent().parent();
        let _img = card.find('.js_type1_img').val();
        let _text = card.find('.js_type1_txt').val();
        let _intent_type = card.find('.js_type1_intent_type').val();
        card.find('.json_type1_showimg').attr("src", _img);

        if(_text != ""){
            card.find('.json_type1_showtext').css('display','block');
            card.find('.json_type1_showtext').html("متن: " + _text);
        }else{
            card.find('.json_type1_showtext').css('display','none');
            card.find('.json_type1_showtext').html("متن: " + _text);
        }
        
        if(_intent_type != ""){
            card.find('.json_type1_showintent').css('display','block');
            card.find('.json_type1_showintent').html(getIntentName(_intent_type));
        }else{
            card.find('.json_type1_showintent').css('display','none');
            card.find('.json_type1_showintent').html(getIntentName(_intent_type));
        }

        card.addClass("collapsed-card");
        let card_body = card.find('.card-body');

        if(closeCard) card_body.slideUp();
        
    }

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

        const card = $(li);
        let _img = card.find('.js_type1_img').val();
        let _text = card.find('.js_type1_txt').val();
        let _intent_type = card.find('.js_type1_intent_type').val();
        let _intent_data = card.find('.js_type1_intent_data').val();
 
        let obj = {
            img: _img,
            text: _text,
            intent_type: _intent_type,
            intent_data: _intent_data
        };
        if (!li.classList.contains('no-item-found')) {
            arr[i] = obj;
        }
    });

    let stringjs = JSON.stringify(arr);

    textarea.val(stringjs);

    // notyf.open({
    //     type: 'info',
    //     message: 'تغییرات آرایه ای ثبت شد'
    // });

};

function JsonHandlerType1ArraySortChanged() {
    jsonType1ArraySubmitBtnHandler(false);
}

function JsonHandlerType1ArrayChangesHappened() {
    let card = $(this).closest('.json_type1ar_card');
    jsonType1ArraySubmitBtnHandler(true,card,false);
}

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

    $('.json_type1ar_card').find('input, textarea').on('input change',JsonHandlerType1ArrayChangesHappened);

    $('.json_type1_cancel').click(jsonType1CancelBtn);

    $('.all_json_types_delete_btn').click(deleteJsonRowsBtn);

    //json type1 ARRAY
    //https://stackoverflow.com/a/3273355/4565796

    $('#sortable_list_js_handler_typr1_array').sortable({
        group: 'list',
        animation: 200,
        delay: 100,
        delayOnTouchOnly: true,
        handle: ".my-handle",
        ghostClass: 'ghost',
        onSort: JsonHandlerType1ArraySortChanged
    });

    if ($(".json_handler_type1_array")[0]) { //there is json type 1 array list:


        let maxItems = $("#add_json_type1_array_item").attr('data-max-items');
        let minItems = $("#add_json_type1_array_item").attr('data-min-items');

        const jsonString = $.trim($('.json_handler_type1_array > textarea').val());
        let jsonType1ArrayObj;

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

        if (jsonType1ArrayObj.length == 0) {
            if(maxItems != 0 && maxItems==minItems){
                for (let index = 0; index < maxItems; index++) {
                    const htmlrow = jsonType1ArrayRowHtmlMacker(false, null);
                    $(".json_handler_type1_array").find(".showbox").find("#sortable_list_js_handler_typr1_array").append(htmlrow);
                }
            }else{
                const htmlrow = ThereIsNoRowHereHtml();
                $(".json_handler_type1_array").find(".showbox").find("#sortable_list_js_handler_typr1_array").html(htmlrow);
            }
        } else {
            $.each(jsonType1ArrayObj, function (key, value) {
                //console.log("vs: " + value);
                const htmlrow = jsonType1ArrayRowHtmlMacker(false, value);
                $(".json_handler_type1_array").find(".showbox").find("#sortable_list_js_handler_typr1_array").append(htmlrow);
            });
        }

        // $('.json_handler_box_opener_btn').click(jsonHandlersBoxOpener);
        $('.json_handler_box_opener_btn_ng').click(jsonHandlersBoxOpenerNg);
        $('.all_json_types_delete_btn').click(deleteJsonRowsBtn);
        $('.json_type1ar_card').find('input, textarea').on('input change',JsonHandlerType1ArrayChangesHappened);
        // $('.json_type1_submit_array').off("click");
        // //https://stackoverflow.com/a/9467172/4565796
        // $('.json_type1_submit_array').click({
        //     IsSingleItemEdit: true
        // }, jsonType1ArraySubmitBtn);
        // $('.json_type1_cancel').click(jsonType1CancelBtn);
        $('.intent_type_change_btn').click(selectIntentDialog);
        $('.intent_data_change_btn').click(editIntentDataSelector);
        $('.intent_type_code_input').each(function (){intentNamesPrinter($(this));});
        $('.mppanel_image_url').on("input", changeImagePreview);
        newGenImageHandler();

    }


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

        const root = $(this).parent();
        let itemsCount = root.find(".showbox").find("#sortable_list_js_handler_typr1_array").children().length;
        let maxItems = $(this).attr('data-max-items');

        if(itemsCount>=maxItems){
            notyf.error("امکان افزودن آیتم بیشتر وجود ندارد");
            return;
        }

        root.find('.no-item-found').remove();
        const htmlrow = jsonType1ArrayRowHtmlMacker(false, null);
        root.find(".showbox").find("#sortable_list_js_handler_typr1_array").prepend(htmlrow);

        // $('.json_handler_box_opener_btn').click(jsonHandlersBoxOpener);
        $('.json_handler_box_opener_btn_ng').click(jsonHandlersBoxOpenerNg);
        $('.all_json_types_delete_btn').click(deleteJsonRowsBtn);
        $('.json_type1ar_card').find('input, textarea').on('input change',JsonHandlerType1ArrayChangesHappened);
        // $('.json_type1_submit_array').off("click");
        // //https://stackoverflow.com/a/9467172/4565796
        // $('.json_type1_submit_array').click({
        //     IsSingleItemEdit: true
        // }, jsonType1ArraySubmitBtn);
        // $('.json_type1_cancel').click(jsonType1CancelBtn);
        $('.intent_type_change_btn').click(selectIntentDialog);
        $('.intent_data_change_btn').click(editIntentDataSelector);
        $('.intent_type_code_input').each(function (){intentNamesPrinter($(this));});
        $('.mppanel_image_url').on("input", changeImagePreview);
        newGenImageHandler();

    });


}); //end of jqury doc ready