/**
 * Created by asantoni on 11/09/15.
 */

var AIRTIME = (function (AIRTIME) {
  //Module initialization
  if (AIRTIME.widgets === undefined) {
    AIRTIME.widgets = {};
  }

  //Table widget constructor
  /**
   *
   *
   * @param wrapperDOMNode
   * @param {boolean} bItemSelection
   * @param {Object} toolbarButtons
   * @param {Object} dataTablesOptions
   * @param {Object} [emptyPlaceholder]
   * @param {string} emptyPlaceholder.html
   * @param {string} emptyPlaceholder.iconClass
   *
   * @returns {Table}
   * @constructor
   */
  var Table = function (
    wrapperDOMNode,
    bItemSelection,
    toolbarButtons,
    dataTablesOptions,
    emptyPlaceholder
  ) {
    var self = this;

    self.HUGE_INT = Math.pow(2, 53) - 1;

    //Constants and enumerations
    self.SELECTION_MODE = {
      SINGLE: 0,
      MULTI_SHIFT: 1,
      MULTI_CTRL: 2,
    };

    //Member variables
    self._datatable = null;
    self._selectedRows = []; //An array containing the underlying objects for each selected row. (Easy to use!)
    //self._selectedRowVisualIdxMap = []; //A map of the visual index of a selected rows onto the actual row data.
    self._selectedRowVisualIdxMin = self.HUGE_INT;
    self._selectedRowVisualIdxMax = -1;
    self._$wrapperDOMNode = null;
    self._toolbarButtons = null;
    //Save some of the constructor parameters
    self._$wrapperDOMNode = $(wrapperDOMNode);
    self._toolbarButtons = toolbarButtons;
    self._emptyPlaceholder = emptyPlaceholder;

    // Exclude the leftmost column if we're implementing item selection
    self._colVisExcludeColumns = bItemSelection ? [0] : [];

    //Finish initialization of the datatable since everything is declared by now.

    // If selection is enabled, add in the checkbox column.
    if (bItemSelection) {
      dataTablesOptions["aoColumns"].unshift(
        /* Checkbox */ {
          sTitle: "",
          mData: self._datatablesCheckboxDataDelegate.bind(this),
          bSortable: false,
          bSearchable: false,
          sWidth: "24px",
          sClass: "airtime_table_checkbox",
        }
      );
    }

    var options = {
      aoColumns: [
        /* Title */ {
          sTitle: $.i18n._("Make sure to override me"),
          mDataProp: "track_title",
          sClass: "library_title",
          sWidth: "170px",
        },
      ],
      bProcessing: true,
      bServerSide: true,
      sAjaxSource: baseUrl + "rest/media", //Override me
      sAjaxDataProp: "aaData",
      bScrollCollapse: false,
      deferLoading: 1, //0 tells it there's zero elements loaded and disables the automatic AJAX. We don't want to load until after we bind all our event handlers, to prevent a race condition with the "init" event callback.
      sPaginationType: "full_numbers",
      bJQueryUI: true,
      bAutoWidth: false,
      aaSorting: [],
      iDisplayLength: 25,
      aLengthMenu: [25, 50, 100],
      oLanguage: getDatatablesStrings({
        sEmptyTable: $.i18n._(""),
        sZeroRecords: $.i18n._("No matching results found."),
      }),
      oColVis: {
        sAlign: "right",
        aiExclude: self._colVisExcludeColumns,
        buttonText: $.i18n._("Columns"),
        iOverlayFade: 0,
      },
      // z = ColResize, R = ColReorder, C = ColVis
      sDom: 'Rf<"dt-process-rel"r><"H"<"table_toolbar"C>><"dataTables_scrolling"t<".empty_placeholder"<".empty_placeholder_image"><".empty_placeholder_text">>><"F"lip>>',

      fnPreDrawCallback: function () {
        $("#draggingContainer").remove();
      },
      fnServerData: self._fetchData.bind(self),
      //"fnInitComplete" : function() { self._setupEventHandlers(bItemSelection) }
      fnDrawCallback: function () {
        self.clearSelection();
      },
    };

    //Override any options with those passed in as arguments to this constructor.
    for (var key in dataTablesOptions) {
      options[key] = dataTablesOptions[key];
    }

    if (options.fnCreatedRow) {
      options.fnCreatedRow = options.fnCreatedRow.bind(self);
    }
    if (options.fnDrawCallback) {
      options.fnDrawCallback = options.fnDrawCallback.bind(self);
    }

    self._datatable = self._$wrapperDOMNode.dataTable(options);
    // self._datatable.fnDraw(); //Load the AJAX data now that our event handlers have been bound.
    self._setupEventHandlers(bItemSelection);

    //return self._datatable;
    return self;
  };

  Table.prototype.assignDblClickHandler = function (fn) {
    $(this._datatable, "tbody tr").on(
      "dblclick",
      this._SELECTORS.SELECTION_TABLE_ROW,
      fn
    );
  };

  /* Set up global event handlers for the datatable.
   *  @param bItemSelection Whether or not row selection behaviour should be enabled for this widget.
   * */
  Table.prototype._setupEventHandlers = function (bItemSelection) {
    var self = this;

    /** This table row event handler is created once and catches events for any row. (It's less resource intensive
     *  than having a per-row callback...)
     */
    if (bItemSelection) {
      $(self._datatable, "tbody tr").on(
        "click contextmenu",
        self._SELECTORS.SELECTION_TABLE_ROW,
        function (e) {
          var aData = self._datatable.fnGetData(this);
          var iDisplayIndex = $(this).index(); // The index of the row in the current page in the table.
          var nRow = this;

          e.stopPropagation();
          e.preventDefault();
          document.getSelection().removeAllRanges();

          var selectionMode = self.SELECTION_MODE.SINGLE;
          if (e.shiftKey) {
            selectionMode = self.SELECTION_MODE.MULTI_SHIFT;
          } else if (e.ctrlKey) {
            selectionMode = self.SELECTION_MODE.MULTI_CTRL;
          }

          if (e.button == 2) {
            selectionMode = self.SELECTION_MODE.SINGLE;
          }
          self.selectRow(nRow, aData, selectionMode, iDisplayIndex);
        }
      );

      $(self._datatable, "tbody tr").on(
        "click",
        self._SELECTORS.SELECTION_CHECKBOX,
        function (e) {
          $this = $(this);

          var iVisualRowIdx = $this.parent().index();
          var aData = self._datatable.fnGetData(iVisualRowIdx);
          var selectionMode = self.SELECTION_MODE.MULTI_CTRL; //Behaviour for checkboxes.
          if (e.shiftKey) {
            selectionMode = self.SELECTION_MODE.MULTI_SHIFT;
          }
          self.selectRow($this.parent(), aData, selectionMode, iVisualRowIdx); //Always multiselect for checkboxes
          e.stopPropagation();
          return true;
        }
      );

      // Clear selection when switching pages
      $(self._datatable).on("page", function () {
        self.clearSelection();
      });
    }

    // On filter, display the number of total and filtered results in the search bar
    $(self._datatable).on("filter", function () {
      var dt = self._datatable,
        f = dt.closest(".dataTables_wrapper").find(".filter-message"),
        totalRecords = dt.fnSettings().fnRecordsTotal(),
        totalDisplayRecords = dt.fnSettings().fnRecordsDisplay();

      if (f.length === 0) {
        var el = document.createElement("span");
        el.setAttribute("class", "filter-message");
        f = dt
          .closest(".dataTables_wrapper")
          .find(".dataTables_filter")
          .append(el)
          .find(".filter-message");
      }

      f.text(
        totalRecords > totalDisplayRecords
          ? $.i18n._("Filtering out ") +
              (totalRecords - totalDisplayRecords) +
              $.i18n._(" of ") +
              totalRecords +
              $.i18n._(" records")
          : ""
      );

      dt.closest(".dataTables_wrapper")
        .find('.dataTables_filter input[type="text"]')
        .css("padding-right", f.outerWidth());
    });

    //Since this function is already called when the datatables initialization is complete, we know the DOM
    //structure for the datatable exists and can just proceed to setup the toolbar DOM elements now.
    self._setupToolbarButtons(self._toolbarButtons);
  };

  /**
   * Member functions
   *
   */

  /** Populate the toolbar with buttons.
   *
   * @param buttons A list of objects which contain button definitions. See self.TOOLBAR_BUTTON_ROLES for an example, or use getStandardToolbarButtons() to get a list of them.
   * @private
   */
  Table.prototype._setupToolbarButtons = function (buttons) {
    var self = this;
    var $menu = self._$wrapperDOMNode
      .parent()
      .parent()
      .find("div.table_toolbar");
    $menu.addClass("btn-toolbar");

    //Create the toolbar buttons.
    $.each(buttons, function (idx, btn) {
      var buttonElement = self._createToolbarButton(
        btn.title,
        btn.iconClass,
        btn.extraBtnClass,
        btn.elementId
      );
      $menu.append(buttonElement);
      btn.element = buttonElement; //Save this guy in case you need it later.
      //Bind event handlers to each button
      $.each(btn.eventHandlers, function (eventName, eventCallback) {
        $(buttonElement).on(eventName, function () {
          if ($(buttonElement).find("button").is(":disabled")) {
            return;
          }
          eventCallback();
        });
      });
    });

    self._checkToolbarButtons();
  };

  /**
   * Check each of the toolbar buttons for the table and disable them if their constraints are invalid.
   *
   * Passes current Table object context to function calls.
   */
  Table.prototype._checkToolbarButtons = function () {
    var self = this;
    $.each(self._toolbarButtons, function (idx, btn) {
      var btnNode = $(btn.element).find("button").get(0);
      btnNode.disabled = btn.disabled = !btn.validateConstraints.call(self);
    });
  };

  /** Create the DOM element for a toolbar button and return it. */
  Table.prototype._createToolbarButton = function (
    title,
    iconClass,
    extraBtnClass,
    elementId
  ) {
    if (!iconClass) {
      iconClass = "icon-plus";
    }

    // var title = $.i18n._('Delete');
    var outerDiv = document.createElement("div");
    outerDiv.className = "btn-group";
    outerDiv.title = title;
    var innerButton = document.createElement("button");
    //innerButton.className = 'btn btn-small ' + extraBtnClass;
    innerButton.className = "btn " + extraBtnClass;
    innerButton.id = elementId;
    var innerIcon = document.createElement("i");
    innerIcon.className = "icon-white " + iconClass;
    var innerTextSpan = document.createElement("span");
    var innerText = document.createTextNode(title);
    innerTextSpan.appendChild(innerText);
    innerButton.appendChild(innerIcon);
    innerButton.appendChild(innerTextSpan);
    outerDiv.appendChild(innerButton);

    /* Here's an example of what the button HTML should look like:
         "<div class='btn-group' title=" + $.i18n._('Delete') + ">" +
         "<button class='btn btn-small btn-danger' id='sb-trash'>" +
         "<i class='icon-white icon-trash'></i>" +
         "<span>" + $.i18n._('Delete') + "</span>" +
         "</button>" +
         "</div>"*/
    return outerDiv;
  };

  Table.prototype.clearSelection = function () {
    this._selectedRows = [];
    //self._selectedRowVisualIdxMap = [];
    this._selectedRowVisualIdxMin = self.HUGE_INT;
    this._selectedRowVisualIdxMax = -1;
    this._$wrapperDOMNode.find(".selected").removeClass("selected");
    this._$wrapperDOMNode
      .find(this._SELECTORS.SELECTION_CHECKBOX)
      .find("input")
      .attr("checked", false);
    this._checkToolbarButtons();
  };

  /** @param nRow is a tr DOM node (non-jQuery)
   * @param aData is an array containing the raw data for the row. Can be null if you don't have it.
   * @param selectionMode is an SELECT_MODE enum. Specify what selection mode you want to use for this action.
   * @param iVisualRowIdx is an integer which corresponds to the index of the clicked row, as it appears to the user.
   *             eg. The 5th row in the table will have an iVisualRowIdx of 4 (0-based).
   */
  Table.prototype.selectRow = function (
    nRow,
    aData,
    selectionMode,
    iVisualRowIdx
  ) {
    var self = this;

    //Default to single item selection.
    if (selectionMode == undefined) {
      selectionMode = self.SELECTION_MODE.SINGLE;
    }

    var $nRow = $(nRow);

    //Regular single left-click mode
    if (selectionMode == self.SELECTION_MODE.SINGLE) {
      self.clearSelection();

      self._selectedRows.push(aData);
      self._selectedRowVisualIdxMin = iVisualRowIdx;
      self._selectedRowVisualIdxMax = iVisualRowIdx;
      //self._selectedRowVisualIdxMap[iVisualRowIdx] = aData;

      $nRow.addClass("selected");
      $nRow
        .find(self._SELECTORS.SELECTION_CHECKBOX)
        .find("input")
        .attr("checked", true);
    }
    //Ctrl-click multi row selection mode
    else if (selectionMode == self.SELECTION_MODE.MULTI_CTRL) {
      var foundAtIdx = $.inArray(aData, self._selectedRows);

      //console.log('checkbox mouse', iVisualRowIdx, foundAtIdx);

      //If the clicked row is already selected, deselect it.
      if (foundAtIdx >= 0 && self._selectedRows.length >= 1) {
        self._selectedRows.splice(foundAtIdx, 1);
        $nRow.removeClass("selected");
        $nRow
          .find(self._SELECTORS.SELECTION_CHECKBOX)
          .find("input")
          .attr("checked", false);
      } else {
        self._selectedRows.push(aData);

        self._selectedRowVisualIdxMin = iVisualRowIdx;
        self._selectedRowVisualIdxMax = iVisualRowIdx;

        $nRow.addClass("selected");
        $nRow
          .find(self._SELECTORS.SELECTION_CHECKBOX)
          .find("input")
          .attr("checked", true);
      }
    }
    //Shift-click multi row selection mode
    else if (selectionMode == self.SELECTION_MODE.MULTI_SHIFT) {
      //If there's no rows selected, just behave like single selection.
      if (self._selectedRows.length == 0) {
        return self.selectRow(
          nRow,
          aData,
          self.SELECTION_MODE.SINGLE,
          iVisualRowIdx
        );
      }

      if (iVisualRowIdx > self._selectedRowVisualIdxMax) {
        self._selectedRowVisualIdxMax = iVisualRowIdx;
      }
      if (iVisualRowIdx < self._selectedRowVisualIdxMin) {
        self._selectedRowVisualIdxMin = iVisualRowIdx;
      }

      var selectionStartRowIdx = Math.min(
        iVisualRowIdx,
        self._selectedRowVisualIdxMin
      );
      var selectionEndRowIdx = Math.min(
        iVisualRowIdx,
        self._selectedRowVisualIdxMax
      );

      //We can assume there's at least 1 row already selected now.
      var allRows = self._datatable.fnGetData();

      self._selectedRows = [];
      for (
        var i = self._selectedRowVisualIdxMin;
        i <= self._selectedRowVisualIdxMax;
        i++
      ) {
        self._selectedRows.push(allRows[i]);
        $row = $($nRow.parent().children()[i]);
        $row.addClass("selected");
        $row
          .find(self._SELECTORS.SELECTION_CHECKBOX)
          .find("input")
          .attr("checked", true);
      }
    } else {
      console.log("Unimplemented selection mode");
    }

    self._checkToolbarButtons();
  };

  Table.prototype.getSelectedRows = function () {
    return this._selectedRows;
  };

  Table.prototype.getEmptyPlaceholder = function () {
    return this._emptyPlaceholder;
  };

  Table.prototype._handleAjaxError = function (r) {
    // If the request was denied due to permissioning
    if (r.status === 403) {
      $(".dt-process-rel").hide();
      $(".empty_placeholder_text").text(
        $.i18n._("You don't have permission to view this resource.")
      );
      $(".empty_placeholder").show();
    }
  };

  /** Grab data from a REST API and format so that DataTables can display it.
   *  This is the DataTables REST adapter function, basically.
   * */
  Table.prototype._fetchData = function (
    sSource,
    aoData,
    fnCallback,
    oSettings
  ) {
    var self = this;
    var echo = aoData[0].value; //Datatables state tracking. Must be included.

    var sortColName = "";
    var sortDir = "";
    var search = self._$wrapperDOMNode
      .closest(".dataTables_wrapper")
      .find(".dataTables_filter")
      .find("input")
      .val();
    if (oSettings.aaSorting.length > 0) {
      var sortColIdx = oSettings.aaSorting[0][0];
      sortColName = oSettings.aoColumns[sortColIdx].mDataProp;
      sortDir = oSettings.aaSorting[0][1].toUpperCase();
    }

    // FIXME: We should probably just be sending aoData back here..?
    $.ajax({
      dataType: "json",
      type: "GET",
      url: sSource,
      data: {
        limit: oSettings._iDisplayLength,
        offset: oSettings._iDisplayStart,
        sort: sortColName,
        sort_dir: sortDir,
        search: search,
      },
      success: function (json, textStatus, jqXHR) {
        var rawResponseJSON = json;
        json = [];
        json.aaData = rawResponseJSON;
        json.iTotalRecords = jqXHR.getResponseHeader("X-TOTAL-COUNT");
        json.iTotalDisplayRecords = json.iTotalRecords;
        json.sEcho = echo;

        //Pass it along to datatables.
        fnCallback(json);
      },
      error: self._handleAjaxError,
    });
  };

  Table.prototype._datatablesCheckboxDataDelegate = function (
    rowData,
    callType,
    dataToSave
  ) {
    if (callType == undefined) {
      //Supposed to return the raw data for the type here.
      return null;
    } else if (callType == "display") {
      return "<input type='checkbox'>";
    } else if (callType == "sort") {
      return null;
    } else if (callType == "type") {
      return "input";
    } else if (callType == "set") {
      //The data to set is in dataToSave.
      return;
    } else if (callType == "filter") {
      return null;
    }

    //For all other calls, just return the data as this:
    return "check";
  };

  //Accessors / Mutators

  Table.prototype.getDatatable = function () {
    return this._datatable;
  };

  //Static initializers / Class variables

  Table.prototype._SELECTORS = Object.freeze({
    SELECTION_CHECKBOX: ".airtime_table_checkbox",
    SELECTION_TABLE_ROW: "tr",
  });

  Table.TOOLBAR_BUTTON_ROLES = {
    NEW: 0,
    EDIT: 1,
    DELETE: 2,
  };
  Object.freeze(Table.TOOLBAR_BUTTON_ROLES);

  //Set of standard buttons. Use getStandardToolbarButtons() to grab these and pass them to the init() function.
  Table._STANDARD_TOOLBAR_BUTTONS = {};
  Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.NEW] = {
    title: $.i18n._("New"),
    iconClass: "icon-plus",
    extraBtnClass: "btn-small btn-new",
    elementId: "",
    eventHandlers: {},
    validateConstraints: function () {
      return true;
    },
  };
  Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.EDIT] = {
    title: $.i18n._("Edit"),
    iconClass: "icon-pencil",
    extraBtnClass: "btn-small",
    elementId: "",
    eventHandlers: {},
    validateConstraints: function () {
      return true;
    },
  };
  Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.DELETE] = {
    title: $.i18n._("Delete"),
    iconClass: "icon-trash",
    extraBtnClass: "btn-small btn-danger",
    elementId: "",
    eventHandlers: {},
    validateConstraints: function () {
      return true;
    },
  };
  Object.freeze(Table._STANDARD_TOOLBAR_BUTTONS);

  //Static method
  Table.getStandardToolbarButtons = function () {
    //Return a deep copy
    return jQuery.extend(true, {}, Table._STANDARD_TOOLBAR_BUTTONS);
  };

  //Add Table to the widgets namespace
  AIRTIME.widgets.Table = Table;

  return AIRTIME;
})(AIRTIME || {});