/**
 * TableWidget JS magic
 */

//--------------------------------------------------------------------------------------------------------------------
// Constants

//
const DATASET_REP_TABLESORTER = "tablesorter";
const DATASET_REP_PIVOTUI = "pivotUI";
const DATASET_REP_TABULATOR = "tabulator";

/**
 * FHC_TableWidget this object is used to render the GUI of a table widget and to operate with it
 */
var FHC_TableWidget = {
  //------------------------------------------------------------------------------------------------------------------
  // Properties

  _datasetRepresentation: null, // contains the current data representation

  _bootstrapVersion: 3,
  //------------------------------------------------------------------------------------------------------------------
  // Public methods

  /**
   * To display the TableWidget using the loaded data prenset in the session
   */
  display: function () {
    FHC_TableWidget._getTables(FHC_TableWidget._renderTableWidget);
  },

  /**
   * Alias call to method display only to inprove the readability of the code
   */
  refresh: function () {
    FHC_TableWidget.display();
  },

  //------------------------------------------------------------------------------------------------------------------
  // Private methods

  /**
   * To retrive the page where the TableWidget is used, using the FHC_JS_DATA_STORAGE_OBJECT
   */
  _getTableUniqueIdPrefix: function () {
    return (
      FHC_JS_DATA_STORAGE_OBJECT.called_path +
      "/" +
      FHC_JS_DATA_STORAGE_OBJECT.called_method
    );
  },

  /**
   * Utility method that checks if data contains an error and print that to the console
   * otherwise the TableWidget GUI is refreshed
   */
  _failOrRefresh: function (data, textStatus, jqXHR) {
    if (FHC_AjaxClient.isError(data)) {
      console.log(FHC_AjaxClient.getError(data));
    } else {
      FHC_TableWidget.refresh();
    }
  },

  /**
   * Utility method that checks if data contains an error and print that to the console
   * otherwise the page is reloaded
   */
  _failOrReload: function (data, textStatus, jqXHR) {
    if (FHC_AjaxClient.isError(data)) {
      console.log(FHC_AjaxClient.getError(data));
    } else {
      location.reload();
    }
  },

  /**
   * To reset the Table Widget GUI
   */
  _resetGUI: function (tableWidgetDiv) {
    // If the choosen dataset representation is tablesorter
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
      tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").html("");
      tableWidgetDiv.find("#tableWidgetTableDataset > tbody").html("");
    }

    // If the choosen dataset representation is pivotUI
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) {
      tableWidgetDiv.find("#tableWidgetPivotUI").html("");
    }

    // If the choosen dataset representation is tabulator
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
      tableWidgetDiv.find("#tableWidgetTabulator").html("");
    }
  },

  /**
   * To get via Ajax all the data related to the TableWidget present in the given page
   * If the parameter renderFunction is a valid function, is called on success
   */
  _getTables: function (renderFunction) {
    var tableWidgetUniqueIdArray =
      FHC_TableWidget._getTableWidgetUniqueIdArray();

    for (
      var tableWidgetsCounter = 0;
      tableWidgetsCounter < tableWidgetUniqueIdArray.length;
      tableWidgetsCounter++
    ) {
      FHC_AjaxClient.ajaxCallGet(
        "widgets/Tables/getTable",
        {
          tableUniqueId:
            FHC_TableWidget._getTableUniqueIdPrefix() +
            "/" +
            tableWidgetUniqueIdArray[tableWidgetsCounter],
        },
        {
          successCallback: function (data, textStatus, jqXHR) {
            if (FHC_AjaxClient.hasData(data)) {
              if (typeof renderFunction == "function") {
                renderFunction(FHC_AjaxClient.getData(data));
              }
            } else {
              console.log(FHC_AjaxClient.getError(data));
            }
          },
        }
      );
    }
  },

  /**
   * This method calls all the other methods needed to rendere the GUI for a TableWidget
   * The parameter data contains all the data about the TableWidget and it is given as parameter
   * to all the methods that here are called
   * NOTE: think very carefully before changing the order of the calls
   */
  _renderTableWidget: function (data) {
    FHC_TableWidget._setDatasetRepresentation(data); // set what type of dataset representation was choosen

    FHC_TableWidget._setBootstrapVersion(data); // set the bootstrap version used for the tableWidget

    var tableWidgetDiv = $('div[tableUniqueId="' + data.tableUniqueId + '"]');

    FHC_TableWidget._turnOffEvents(tableWidgetDiv); // turns all the events off

    FHC_TableWidget._resetGUI(tableWidgetDiv); // Reset the entire GUI

    FHC_TableWidget._renderDataset(tableWidgetDiv, data);

    FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off

    FHC_TableWidget._onTableBuilt(tableWidgetDiv, data);
  },

  _onTableBuilt: function (tableWidgetDiv, data) {
    var options = FHC_TableWidget._getRepresentationOptions(data);

    tableWidgetDiv
      .find("#tableWidgetTabulator")
      .tabulator("on", "tableBuilt", () => {
        if (
          typeof options.tableWidgetHeader == "undefined" ||
          (typeof options.tableWidgetHeader != "undefined" &&
            options.tableWidgetHeader != false)
        ) {
          // renders the table headers
          var tabulatorHeaderCollapseHTML =
            _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
          tableWidgetDiv
            .find("#tableWidgetHeader")
            .after(tabulatorHeaderCollapseHTML);
        }

        // makes the table headers toggle visibility when clicking on them
        tableWidgetDiv.find(".btn-select-col").on("click", function () {
          var selected = this.value;

          tableWidgetDiv
            .find("#tableWidgetTabulator")
            .tabulator("toggleColumn", selected);

          // toggle class to color button as selected / deselected
          $(this).toggleClass("btn-select-col-selected").blur(); // blur removes automatic focus
        });
      });
  },

  /**
   * Turns all the events off
   * NOTE: must be aligned to _turnOnEvents
   */
  _turnOffEvents: function (tableWidgetDiv) {
    // If the choosen dataset representation is tablesorter
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
      FHC_TableWidget._disableTablesorter(tableWidgetDiv); // disable the tablesorter
    }
  },

  /**
   * Turns all the events on
   * NOTE: must be aligned to _turnOffEvents
   */
  _turnOnEvents: function (tableWidgetDiv) {
    var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");

    // If the choosen dataset representation is tablesorter
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
      FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter
    }

    // If the choosen dataset representation is tabulator
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
      // ---------------------------------------------------------------------------------------------------------
      // Add events to the elements
      // ---------------------------------------------------------------------------------------------------------

      // Click-Event to download csv
      tableWidgetDiv.find("#download-csv").on("click", function () {
        // BOM for correct UTF-8 char output
        tableWidgetDiv
          .find("#tableWidgetTabulator")
          .tabulator("download", "csv", "data.csv", { bom: true });
      });

      // Click-Event to toggle the collapsable help panel
      tableWidgetDiv.find("#help").on("click", function () {
        // Hide the collapsable settings panel, if it actually shown
        $("#tabulatorSettings-" + tableUniqueId).collapse("hide");

        // Toggle the collapsable help panel
        $("#tabulatorHelp-" + tableUniqueId).collapse("toggle");
      });

      // Click-Event to toggle the collapsable settings panel
      tableWidgetDiv.find("#settings").on("click", function () {
        // Hide the collapsable help panel, if it actually shown
        $("#tabulatorHelp-" + tableUniqueId).collapse("hide");

        // Toggle the collapsable settings panel
        $("#tabulatorSettings-" + tableUniqueId).collapse("toggle");
      });

      /* Beautify button group behaviour
       * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels
       * Also remove the disturbing button focus behaviour
       */
      $(".btn-group > .btn").click(function () {
        if ($(this).hasClass("active")) {
          $(this).removeClass("active").css("outline", "none");
        } else {
          $(this)
            .addClass("active")
            .css("outline", "none")
            .siblings()
            .removeClass("active");
        }
      });

      /**
       * Click-Event to select all rows
       * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton.
       */
      if (typeof tableWidgetHook_selectAllButton == "function") {
        tableWidgetDiv.find("#select-all").on("click", function () {
          tableWidgetHook_selectAllButton(tableWidgetDiv);
        });
      } else {
        tableWidgetDiv.find("#select-all").on("click", function () {
          tableWidgetDiv
            .find("#tableWidgetTabulator")
            .tabulator("selectRow", true);
        });
      }

      // Click-Event to deselect all rows
      tableWidgetDiv.find("#deselect-all").on("click", function () {
        tableWidgetDiv.find("#tableWidgetTabulator").tabulator("deselectRow");
      });

      // Click-Event to toggle column-picker columns
      //! this event was moved to the _onTableBuilt function
    }
  },

  _renderDataset: function (tableWidgetDiv, data) {
    // If the choosen dataset representation is tablesorter then...
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
      FHC_TableWidget._renderDatasetTablesorter(tableWidgetDiv, data); // ...render the tablesorter GUI
    }

    // If the choosen dataset representation is pivotUI then...
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) {
      FHC_TableWidget._renderDatasetPivotUI(tableWidgetDiv, data); // ...render the pivotUI GUI
    }

    // If the choosen dataset representation is tabulator then...
    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
      FHC_TableWidget._renderDatasetTabulator(tableWidgetDiv, data); // ...render the tabulator GUI
    }
  },

  /**
   * Renders the tablesorter for the TableWidget
   * The data to be displayed are retrived from the parameter data
   */
  _renderDatasetTablesorter: function (tableWidgetDiv, data) {
    if (
      data.hasOwnProperty("checkboxes") &&
      data.checkboxes != null &&
      data.checkboxes.trim() != ""
    ) {
      tableWidgetDiv
        .find("#tableWidgetTableDataset > thead > tr")
        .append("<th data-filter='false' title='Select'>Select</th>");
    }

    var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);

    for (var i = 0; i < arrayFieldsToDisplay.length; i++) {
      var columnName = arrayFieldsToDisplay[i];

      tableWidgetDiv
        .find("#tableWidgetTableDataset > thead > tr")
        .append("<th title='" + columnName + "'>" + columnName + "</th>");
    }

    if (
      data.hasOwnProperty("additionalColumns") &&
      $.isArray(data.additionalColumns)
    ) {
      for (var i = 0; i < data.additionalColumns.length; i++) {
        var columnName = data.additionalColumns[i];

        tableWidgetDiv
          .find("#tableWidgetTableDataset > thead > tr")
          .append("<th title='" + columnName + "'>" + columnName + "</th>");
      }
    }

    if (arrayFieldsToDisplay.length > 0) {
      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
        if (data.checkboxes != null && data.checkboxes != "") {
          // select checkbox range with shift key
          if (
            typeof tableWidgetDiv.find("#tableWidgetTableDataset")
              .checkboxes === "function"
          )
            tableWidgetDiv
              .find("#tableWidgetTableDataset")
              .checkboxes("range", true);
        }
        if (data.dataset.length == 0) {
          // Display placeholder if Table is empty
          var numColumns = arrayFieldsToDisplay.length;
          if (
            data.hasOwnProperty("additionalColumns") &&
            $.isArray(data.additionalColumns)
          ) {
            numColumns += data.additionalColumns.length;
          }
          var strHtml = '<tr><td align="center" colspan="' + numColumns + '">';
          strHtml += FHC_PhrasesLib.t("ui", "keineDatenVorhanden");
          strHtml += "</td></tr>";
          tableWidgetDiv
            .find("#tableWidgetTableDataset > tbody")
            .append(strHtml);
        } else {
          for (var i = 0; i < data.dataset.length; i++) {
            var record = data.dataset[i];

            if ($.isEmptyObject(record)) {
              continue;
            }

            var strHtml = "<tr class='" + record.MARK_ROW_CLASS + "'>";

            if (data.checkboxes != null && data.checkboxes != "") {
              strHtml += "<td>";
              strHtml +=
                "<input type='checkbox' name='" +
                data.checkboxes +
                "[]' value='" +
                record[data.checkboxes] +
                "'>";
              strHtml += "</td>";
            }

            $.each(arrayFieldsToDisplay, function (i, fieldToDisplay) {
              if (record.hasOwnProperty(data.fields[i])) {
                strHtml += "<td>" + record[data.fields[i]] + "</td>";
              }
            });

            if (
              data.additionalColumns != null &&
              $.isArray(data.additionalColumns)
            ) {
              $.each(data.additionalColumns, function (i, additionalColumn) {
                if (record.hasOwnProperty(additionalColumn)) {
                  strHtml += "<td>" + record[additionalColumn] + "</td>";
                }
              });
            }

            strHtml += "</tr>";

            tableWidgetDiv
              .find("#tableWidgetTableDataset > tbody")
              .append(strHtml);
          }
        }
      }
    }
  },

  /**
   * Enable the tablesorter libs to render the dataset table with sorting features
   */
  _enableTableSorter: function (tableWidgetDiv) {
    var tableWidgetTablesorter = tableWidgetDiv.find(
      "#tableWidgetTableDataset"
    );

    // Checks if the table contains data (rows)
    if (
      tableWidgetTablesorter.find("tbody:empty").length == 0 &&
      tableWidgetTablesorter.find("tr:empty").length == 0 &&
      tableWidgetTablesorter.hasClass("table-condensed")
    ) {
      tableWidgetTablesorter.tablesorter({
        dateFormat: "ddmmyyyy",
        widgets: ["zebra", "filter"],
        widgetOptions: {
          filter_saveFilters: true,
        },
      });

      $.tablesorter.updateAll(tableWidgetTablesorter[0].config, true, null);
    }
  },

  /**
   * Disable the tablesorter
   */
  _disableTablesorter: function (tableWidgetDiv) {
    tableWidgetDiv.find("#tableWidgetTableDataset").trigger("disable");
  },

  /**
   * Renders the pivotUI for the TableWidget
   * The data to be displayed are retrived from the parameter data
   */
  _renderDatasetPivotUI: function (tableWidgetDiv, data) {
    // Checks if options were given and returns them
    var options = FHC_TableWidget._getRepresentationOptions(data);

    // Manipulation for the representation!
    var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);

    // If there are fields to be displayed...
    if (arrayFieldsToDisplay.length > 0) {
      // ...if there are data to be displayed...
      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
        // Build the array of objects used by pivotUI and store it in pivotUIData
        var pivotUIData = [];

        // Loops through data
        for (var i = 0; i < data.dataset.length; i++) {
          var record = data.dataset[i]; // Single record
          var tmpObj = {}; // New object that represents a record

          // Loops through columns of a record
          $.each(arrayFieldsToDisplay, function (i, fieldToDisplay) {
            if (record.hasOwnProperty(data.fields[i])) {
              tmpObj[fieldToDisplay] = record[data.fields[i]]; // Add data with the column alias
            }
          });

          // If additional columns are present...
          if (
            data.additionalColumns != null &&
            $.isArray(data.additionalColumns)
          ) {
            // ...loops through them
            $.each(data.additionalColumns, function (i, additionalColumn) {
              if (record.hasOwnProperty(additionalColumn)) {
                tmpObj[additionalColumn] = record[additionalColumn]; // Add the additional column
              }
            });
          }

          pivotUIData.push(tmpObj); // Add tmpObj to pivotUIData
        }

        // Renders the pivotUI
        tableWidgetDiv
          .find("#tableWidgetPivotUI")
          .pivotUI(pivotUIData, options);
      }
    }
  },

  /**
   * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
   */
  _getFieldsToDisplay: function (data) {
    var arrayFieldsToDisplay = [];

    if (data.hasOwnProperty("fields") && $.isArray(data.fields)) {
      if (
        data.hasOwnProperty("columnsAliases") &&
        $.isArray(data.columnsAliases)
      ) {
        for (var sfc = 0; sfc < data.fields.length; sfc++) {
          for (var fc = 0; fc < data.fields.length; fc++) {
            if (data.fields[sfc] == data.fields[fc]) {
              arrayFieldsToDisplay[sfc] = data.columnsAliases[fc];
            }
          }
        }
      } else {
        arrayFieldsToDisplay = data.fields;
      }
    }

    return arrayFieldsToDisplay;
  },

  /**
   * Renders the tabulator for the TableWidget
   * The data to be displayed are retrived from the parameter data
   */
  _renderDatasetTabulator: function (tableWidgetDiv, data) {
    // Checks if options were given and returns them
    var options = FHC_TableWidget._getRepresentationOptions(data);
    // Checks if record fields definitions were given and returns them
    var recordFieldsDefinitions =
      FHC_TableWidget._getRepresentationFieldsDefinitions(data);

    // Manipulation for the representation!
    var arrayTabulatorColumns = FHC_TableWidget._getTabulatorColumns(
      data,
      recordFieldsDefinitions
    );

    if (arrayTabulatorColumns.length > 0) {
      // ...if there are data to be displayed...
      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
        if (options == null) options = {};
        options.columnDefaults={
            ...(options.columnDefaults||{}),  
            headerTooltip:
              typeof options.columnDefaults?.tooltipsHeader == "undefined"
                ? true
                : options.columnDefaults?.tooltipsHeader,
          };
        
        
        options.columns = arrayTabulatorColumns;
        options.data = data.dataset;
        options.persistence =
          typeof options.persistence == "undefined"
            ? true
            : options.persistence; // enables persistence (default store in localStorage if available, else in cookie)
        options.persistenceID =
          typeof options.persistenceID == "undefined"
            ? data.tableUniqueId
            : options.persistenceID; // persistenceID to store persistence data seperately for multiple tables
        options.movableColumns =
          typeof options.movableColumns == "undefined"
            ? true
            : options.movableColumns; // allows changing column order

        options.placeholder = _func_placeholder(); // display text when table is empty

        // Renders the tabulator
        tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);

        //! callbacks that need to be attached after the table has built in tabulator version 5+
        tableWidgetDiv
          .find("#tableWidgetTabulator")
          .tabulator("on", "rowSelectionChanged", _func_rowSelectionChanged);
        tableWidgetDiv
          .find("#tableWidgetTabulator")
          .tabulator(
            "on",
            "columnVisibilityChanged",
            _func_columnVisibilityChanged
          );
      }
    }

    // -------------------------------------------------------------------------------------------------------------
    // Render TableWidget Header and -Footer
    // -------------------------------------------------------------------------------------------------------------

    // Render tableWidgetHeader

    if (
      typeof options.tableWidgetHeader == "undefined" ||
      (typeof options.tableWidgetHeader != "undefined" &&
        options.tableWidgetHeader != false)
    ) {
      var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
      tableWidgetDiv.find("#tableWidgetHeader").append(tabulatorHeaderHTML);
    }

    /**
     * 	tableWidgetFooter is NOT rendered by default.
     * 	tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions.
     *	Setup options like this:
     *  tableWidgetFooter: {
     *  	selectButtons: true  // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function
     *  }
     */
    if (
      typeof options.tableWidgetFooter != "undefined" &&
      options.tableWidgetFooter != null
    ) {
      var tabulatorFooterHTML = _renderTabulatorFooterHTML(
        options.tableWidgetFooter
      );
      tableWidgetDiv.find("#tableWidgetFooter").append(tabulatorFooterHTML);
    }
  },

  /**
   * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
   */
  _getTabulatorColumns: function (data, recordFieldsDefinitions) {
    var fieldsToDisplayTabulator = [];

    if (data.hasOwnProperty("fields") && $.isArray(data.fields)) {
      for (var sfc = 0; sfc < data.fields.length; sfc++) {
        for (var fc = 0; fc < data.fields.length; fc++) {
          if (data.fields[sfc] == data.fields[fc]) {
            // Build the array of objects (columns) used by tabulator and store it in tabulatorColumns
            var tmpColumnObj = {}; // New object that represents a column

            // If was given a definition for this field then use it!
            if (
              recordFieldsDefinitions != null &&
              recordFieldsDefinitions.hasOwnProperty(data.fields[sfc])
            ) {
              tmpColumnObj = recordFieldsDefinitions[data.fields[sfc]];
            }

            tmpColumnObj.field = data.fields[sfc]; // Field name to be linked with dataset field name

            // If there is an alias for this field use it to give a title to this field (header)
            if (
              data.hasOwnProperty("columnsAliases") &&
              $.isArray(data.columnsAliases)
            ) {
              tmpColumnObj.title = data.columnsAliases[fc];
            } // otherwise use the field name itself
            else {
              tmpColumnObj.title = data.fields[sfc];
            }

            fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
          }
        }
      }
    }

    // If additional columns are present...
    if (
      data.hasOwnProperty("additionalColumns") &&
      data.additionalColumns != null &&
      $.isArray(data.additionalColumns)
    ) {
      // ...loops through them
      $.each(data.additionalColumns, function (i, additionalColumn) {
        var tmpColumnObj = {}; // New object that represents a column

        // If was given a definition for this field then use it!
        if (
          recordFieldsDefinitions != null &&
          recordFieldsDefinitions.hasOwnProperty(additionalColumn)
        ) {
          tmpColumnObj = recordFieldsDefinitions[additionalColumn];
        }

        tmpColumnObj.title = additionalColumn; // Give a title to this field (header)
        tmpColumnObj.field = additionalColumn; // Field name to be linked with dataset field name

        fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
      });
    }

    return fieldsToDisplayTabulator;
  },

  /**
   * Gets options for the representation
   */
  _getRepresentationOptions: function (data) {
    var options = {}; // eventually contains options fot the representation

    // Checks if options were given
    if (
      data.hasOwnProperty("datasetRepresentationOptions") &&
      data.datasetRepresentationOptions != ""
    ) {
      var tmpOptions = eval("(" + data.datasetRepresentationOptions + ")"); // and converts them from string to javascript code

      // If it is an object then can be used
      if (typeof tmpOptions == "object") {
        options = tmpOptions;
      }
    }

    return options;
  },

  /**
   * Gets record fields definitions to represent the dataset
   */
  _getRepresentationFieldsDefinitions: function (data) {
    var fieldsDefinitions = {}; // eventually contains record fields definitions
    // Checks if record fields definitions was given as parameter
    if (
      data.hasOwnProperty("datasetRepresentationFieldsDefinitions") &&
      data.datasetRepresentationFieldsDefinitions != ""
    ) {
      var tmpFDefs = eval(
        "(" + data.datasetRepresentationFieldsDefinitions + ")"
      ); // and converts them from string to javascript code

      // If it is an object then can be used
      if (typeof tmpFDefs == "object") {
        fieldsDefinitions = tmpFDefs;
      }
    }

    return fieldsDefinitions;
  },

  /**
   * Set what type of dataset representation was choosen
   */
  _setDatasetRepresentation: function (data) {
    if (data.hasOwnProperty("datasetRepresentation")) {
      FHC_TableWidget._datasetRepresentation = data.datasetRepresentation;
    }
  },

  _setBootstrapVersion: function (data) {
    _bootstrapVersion = data.bootstrapVersion;
  },

  _getTableWidgetUniqueIdArray: function () {
    var tableWidgetUniqueIdArray = [];

    $("div[id*='divTableWidgetDataset']").each(function (i, e) {
      tableWidgetUniqueIdArray.push(e.attributes["tableUniqueId"].nodeValue);
    });

    return tableWidgetUniqueIdArray;
  },
};

//**********************************************************************************************************************
// Render functions
//**********************************************************************************************************************
/*
 * Processed when row selection changed.
 * Displays number of selected rows on row selection change.
 */
function _func_rowSelectionChanged(data, rows) {
  $("#number-selected").html(
    "Ausgewählte Zeilen: <strong>" + rows.length + "</strong>"
  );
}

/* Processed when columns visibility changed (e.g. using the column picker).
 * Redraws the table to expand columns to table width.
 */
function _func_columnVisibilityChanged(column, visible) {
  var table = column.getTable();

  table.redraw();
}

/*
 * Displays text when table is empty
 */
function _func_placeholder() {
  return "<h4>" + FHC_PhrasesLib.t("ui", "keineDatenVorhanden") + "</h4>";
}

// Returns TableWidget Header HTML (download-, setting button...)
function _renderTabulatorHeaderHTML(tableWidgetDiv) {
  var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");

  var tabulatorHeaderHTML = "";
  tabulatorHeaderHTML += `<div  ${
    _bootstrapVersion == 3 ? 'class="btn-toolbar pull-right" style="margin-bottom:0.5rem;"' : 'class="btn-toolbar d-flex justify-content-end mb-2"'
  }" role="toolbar">
		<div class="btn-group" role="group">
			<!-- CSV Download button -->
			<button id="download-csv" class="btn ${
        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
      }" type="button" 
			data-toggle="tooltip" data-placement="left" title="Download CSV">
				<small>
					CSV&nbsp;&nbsp;
				</small>
				<i class="fa fa-arrow-down"></i>
			</button>
			<!-- Hilfe Button -->
			<button id="help" class="btn ${
        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
      }" type="button"
			data-toggle="collapse tooltip" data-target="tabulatorHelp-${tableUniqueId}" data-placement="left" 
			title="${FHC_PhrasesLib.t("ui", "hilfe")}">
				<i class="fa fa-question"></i>
			</button>
			<!-- Settings Button -->
			<button id="settings" class="btn ${
        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
      }" type="button" 
			data-toggle="collapse tooltip" data-target="tabulatorSettings-${tableUniqueId}" data-placement="left"
			title="${FHC_PhrasesLib.t("ui", "tabelleneinstellungen")}" 
			aria-expanded="false" aria-controls="tabulatorSettings-${tableUniqueId}">
				<i class="fa fa-cog"></i>
			</button>
		</div>
	</div>
	`;

  return tabulatorHeaderHTML;
}

// Returns collapsable HTML element for TableWidget header buttons
function _renderTabulatorHeaderCollapseHTML(
  tableWidgetDiv,
  arrayTabulatorColumns
) {
  var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");

  var tabulatorHeaderCollapseHTML = "";

  // CollapseHTML 'Settings'
  if (_bootstrapVersion == 3) {
    tabulatorHeaderCollapseHTML += `
	<div class="row ">
		<div class="col-lg-12 collapse" id="tabulatorSettings-${tableUniqueId}">
			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
				<div class="panel panel-default">
					<div class="panel-heading" role="tab" id="headingOne">
						<h5 class="panel-title">
							<a role="button" data-toggle="collapse" data-parent="#accordion" 
							href="#selectColumns-${tableUniqueId}" 
							aria-expanded="false" aria-controls="selectColumns">
							${FHC_PhrasesLib.t("ui", "spaltenEinstellen")} 
							</a>
						</h5>
					</div>
					<div id="selectColumns-${tableUniqueId}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
						<div class="panel-body">
							<div class="btn-group" role="group">`;
  } else {
    tabulatorHeaderCollapseHTML += `<div class="row ">
			<div class="col-12 mb-2 collapse" id="tabulatorSettings-${tableUniqueId}">
				<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
					<div class="accordion-item">
						<h5  class=" accordion-header" role="tab" id="headingOne">		
							<a role="button"  class="accordion-item-dark text-dark accordion-button" data-bs-toggle="collapse" data-bs-parent="#accordion" 
							href="#selectColumns-${tableUniqueId}" 
							aria-expanded="false" aria-controls="selectColumns">
							${FHC_PhrasesLib.t("ui", "spaltenEinstellen")}
							</a>
						</h5>
						<div id="selectColumns-${tableUniqueId}" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="headingOne" data-bs-parent="#accordion">
							<div class=" accordion-body ">
								<div class="d-flex flex-row flex-wrap btn-group" role="group">`;
  }
  // Create column picker (Spalten einstellen)
  tableWidgetDiv
    .find("#tableWidgetTabulator")
    .tabulator("getColumns")
    .forEach(function (column) {
      var field = column.getField();
      var title = column.getDefinition().title;
      var btn_select_col_selected = column.isVisible()
        ? "btn-select-col-selected"
        : "";

      // If certain columns should be excluded from the column picker (define them in a blacklist array)
      if (
        typeof tableWidgetBlacklistArray_columnUnselectable != "undefined" &&
        Array.isArray(tableWidgetBlacklistArray_columnUnselectable) &&
        tableWidgetBlacklistArray_columnUnselectable.length
      ) {
        if (
          $.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0
        ) {
          tabulatorHeaderCollapseHTML += `<button type="button" style="flex:0 0 auto " class="btn ${
            _bootstrapVersion == 3
              ? "btn-default"
              : "btn-outline-secondary flex-shrink-1"
          } btn-sm btn-select-col ${btn_select_col_selected} " aria-pressed="true" id="btn-${field}" value="${field}">${title}</button>`;
        }
      }
      // Else provide all tabulator fields as pickable columns
      else {
        tabulatorHeaderCollapseHTML += `<button type="button" style="flex:0 0 auto " class="btn ${
          _bootstrapVersion == 3
            ? "btn-default"
            : "btn-outline-secondary flex-shrink-1"
        } btn-sm btn-select-col ${btn_select_col_selected} " aria-pressed="true" id="btn-${field}" value="${field}">${title}</button>`;
      }
    });

  tabulatorHeaderCollapseHTML += "</div>"; // end btn-group
  tabulatorHeaderCollapseHTML += "</div>"; // end panel-body / accordion-body
  tabulatorHeaderCollapseHTML += "</div>"; // end panel-collapse / accordion-collapse
  tabulatorHeaderCollapseHTML += "</div>"; // end panel / accordion-item
  tabulatorHeaderCollapseHTML += "</div>"; // end panel-group / accordion
  tabulatorHeaderCollapseHTML += " </div>"; // end col
  tabulatorHeaderCollapseHTML += " </div>"; // end row

  return tabulatorHeaderCollapseHTML;
}

// Returns TableWidget Footer HTML (de-/select buttons,...)
function _renderTabulatorFooterHTML(tableWidgetFooterOptions) {
  var tabulatorFooterHTML = "";

  // If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons
  if (
    typeof tableWidgetFooterOptions.selectButtons != "undefined" &&
    tableWidgetFooterOptions.selectButtons == true
  ) {
    tabulatorFooterHTML += `<div ${_bootstrapVersion==3?'style="margin-top:1.5rem;" class="btn-toolbar"': 'class="btn-toolbar mt-4"'}  role="toolbar">
			<div class="btn-group" role="group">
				<button id="select-all" class="btn ${
          _bootstrapVersion == 3
            ? "btn-default pull-left"
            : "btn-outline-secondary float-start"
        } " type="button">
			 		${FHC_PhrasesLib.t("ui", "alleAuswaehlen")}
				</button>
				<button id="deselect-all" class="btn ${
          _bootstrapVersion == 3
            ? "btn-default pull-left"
            : "btn-outline-secondary float-start"
        } " type="button">
					${FHC_PhrasesLib.t("ui", "alleAbwaehlen")}
				</button>
				<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal">
					${FHC_PhrasesLib.t("ui", "ausgewaehlteZeilen")} : <strong>0</strong>
				</span>
			</div>
		</div>
		</br></br>`;
  }

  return tabulatorFooterHTML;
}

/**
 * When JQuery is up
 */
$(document).ready(function () {
  FHC_TableWidget.display();
});