
//\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\//
// Popup floating modeless "Design Tools" window
//\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\//


function OpenReportDesignTools() {

    // Already open?
    if (bReportDesignToolsOpen)
        return;

    // Open the dialog
    // https://igniteui.com/help/igdialog-property-reference
    $("#igDialogReportDesignTools").igDialog({ modal: false, headerText: "Report Design Tools", width: 400, height:400, resizable: true, /*showCloseButton: false,*/ closeOnEscape: true, /*openAnimation: "",*/ closeAnimation: "fade" });
    $("#igDialogReportDesignTools").igDialog("open");

    PostionDialogLowerRight("igDialogReportDesignTools", 50/*margin*/);

    bReportDesignToolsOpen = true;
}

function CloseReportDesignTools() {

    // Not open?
    if (!bReportDesignToolsOpen)
        return;

    var DialogReportDesignTools = $("#igDialogReportDesignTools");
    if (!DialogReportDesignTools)
        return;

    bReportDesignToolsOpen = false;
    $("#igDialogReportDesignTools").igDialog("close");
}

var bReportDesignToolsOpen = false;


function CheckOpenReportDesignTools() {

    // Open only if the "Design" tab is selected
    var bDesignTabSelected = IsReportDesignTabSelected();
    if (bDesignTabSelected)
        OpenReportDesignTools();
}






function OnLoadReportDesignFieldsInDiv(LoaderImg) {

    if (!LoaderImg)
        return;

    // Convert a raw html element to jQuery
    LoaderImg = $(LoaderImg);
    if (!LoaderImg)
        return;

    var DesignToolsTabDiv = LoaderImg.parent();
    if (!DesignToolsTabDiv || DesignToolsTabDiv.length == 0)
        return;

    AjaxFillReportDesignTools("Fields", "OnReportDesignClickFunction", "OnDragStartInsertNewReportObjectByValue", DesignToolsTabDiv);
}


function OnLoadReportDesignVariablesInDiv(LoaderImg) {

    if (!LoaderImg)
        return;

    // Convert a raw html element to jQuery
    LoaderImg = $(LoaderImg);
    if (!LoaderImg)
        return;

    var DesignToolsTabDiv = LoaderImg.parent();
    if (!DesignToolsTabDiv || DesignToolsTabDiv.length == 0)
        return;

    AjaxFillReportDesignTools("Variables", "OnReportDesignClickFunction", "OnDragStartInsertNewReportObjectByValue", DesignToolsTabDiv);
}


function OnLoadReportDesignSpecialInDiv(LoaderImg) {

    if (!LoaderImg)
        return;

    // Convert a raw html element to jQuery
    LoaderImg = $(LoaderImg);
    if (!LoaderImg)
        return;

    var DesignToolsTabDiv = LoaderImg.parent();
    if (!DesignToolsTabDiv || DesignToolsTabDiv.length == 0)
        return;

    AjaxFillReportDesignTools("Special", "OnReportDesignClickFunction", "OnDragStartInsertNewReportObjectByValue", DesignToolsTabDiv);
}


function OnLoadReportDesignSectionsInDiv(LoaderImg) {

    if (!LoaderImg)
        return;

    // Convert a raw html element to jQuery
    LoaderImg = $(LoaderImg);
    if (!LoaderImg)
        return;

    var DesignToolsTabDiv = LoaderImg.parent();
    if (!DesignToolsTabDiv || DesignToolsTabDiv.length == 0)
        return;

    AjaxFillReportDesignTools("Sections", "OnReportDesignClickFunction", "OnDragStartInsertNewReportObjectByValue", DesignToolsTabDiv);
}






/**
 * Fill the "Report Design Tools" dialog tab with tree items
 * These tree items can be dragged onto a report
 * Drag tree items to add fields, variables, special items, and new sections to a report
 * @param {any} ToolType
 * @param {any} OnDragStartFunction
 * @param {any} DesignToolsTabDiv
 */
function AjaxFillReportDesignTools(ToolType, OnClickFunction, OnDragStartFunction, DesignToolsTabDiv) {

    var sPathname = GetSelectedReportPathname();

    var params = {
        "Pathname": sPathname,
        "ToolType": ToolType,
        "OnClickFunction": OnClickFunction,
        "OnDragStartFunction": OnDragStartFunction,
    };

    $.ajax({
        url: VirtualDirectory + "/Home/AjaxGetReportDesignToolsHtml",
        type: "POST",
        data: JSON.stringify(params),
        contentType: "application/json",
        success: function (response) {
            if (response.Success) {
                DesignToolsTabDiv.html(response.Html);

                // Html data is for a Mini Tree View
                // This is a list of <ul> and <li> items that act as a tree
                // https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_treeview
                SetupMiniHtmlTreeView(DesignToolsTabDiv);
            }
            else {
                ToastError("Report Design Tools", response.ErrorResults);
                DesignToolsTabDiv.html(response.ErrorResults);
            }
        },
        error: function (xhr, status, error) {
            var errormsg = "Error " + xhr.status + ", " + xhr.statusText;
            ToastError("AjaxFillReportDesignTools", errormsg);
            console.log('AJAX: ' + errormsg);
        }
    });
}




/**
 * User clicked a Report Design Tools list item (probably because they didn't know what else to do)
 * Tell user what to do with these list items
 * @param {any} event
 */
function OnReportDesignClickFunction(event) {

    event.preventDefault();
    ToastError("Drag Object", "Drag items onto report design page");
}

/**
 * A report field is being dragged from the "Report Design Tools" dialog to the report page
 * This function is called from ondragstart event for list items
 * See OnDragDropReportObject() for the "drop" function when the user releases the mouse button
 * @param {any} event
 * @returns
 */
function OnDragStartInsertNewReportObjectByValue(event) {

    var DraggedElement = event.target;
    if (!DraggedElement)
        return;
    DraggedObject = $(DraggedElement);
    if (!DraggedObject || !DraggedObject.length)
        return;

    // Get information about the object being dragged
    // Get data-systemtype from the object being dragged
    var ReportObjectSystemType = DraggedObject.attr('data-systemtype');
    var ReportObjectValue = DraggedObject.attr('value');
    if (!ReportObjectSystemType) {
        ToastMessage("Drag Object", "Must add 'data-systemtype' attribute to draggable objects");
        return;
    }

    // Create a new Json object string for dataTransfer.setData()
    // This Json string will be used when the object is dropped
    // A dropped object will be recreated with ObjectSystemType (System.Type)
    ReportObjectSystemType = ReportObjectSystemType.trim();
    ReportObjectValue = ReportObjectValue.trim();
    var ReportObjectJson = { ObjectSystemType: ReportObjectSystemType, ObjectValue: ReportObjectValue };
    var ReportObjectJsonString = JSON.stringify(ReportObjectJson);

    // Set up dataTransfer for the drag operation
    // This data will be recieved by OnDragDropReportObject() when the "drop"" actually occurs
    event.dataTransfer.clearData();
    event.dataTransfer.setData("text/plain", DRAGACTIONINSERTREPORTOBJECT + " " + ReportObjectJsonString);
    event.dataTransfer.effectAllowed = "copy";
    event.dataTransfer.dropEffect = "copy";
}






