// Datatables in tabs that aren't initially shown need columns resized on show
$('a[data-toggle="tab"]').on("shown.bs.tab", function(e) {
  $(this.getAttribute("href"))
    .find("table.dataTable")
    .each(function() {
      $(this)
        .dataTable()
        .fnAdjustColumnSizing();
    });
});

const zStorage = (function() {
  const stores = {};

  return {
    set(key, value, table) {
      if (!stores.hasOwnProperty(table)) {
        stores[table] = new idbKeyval.Store(APP_NAME, table + "_table");
      }
      return idbKeyval.set(key, value, stores[table]);
    },

    get(key, table) {
      if (!stores.hasOwnProperty(table)) {
        stores[table] = new idbKeyval.Store(APP_NAME, table + "_table");
      }
      return idbKeyval.get(key, stores[table]);
    }
  };
})();

const DEBUG = false;

function getTableParams(tableName, settings, callback) {
  const [cacheFilters, paramFilters] = settings.filters.reduce(
    ([c, p], cur) => (cur.cache ? [[cur, ...c], p] : [c, [cur, ...p]]),
    [[], []]
  );

  Promise.all(
    [
      zStorage.get("view", tableName),
      zStorage.get("size", tableName),
      zStorage.get("sort", tableName),
      zStorage.get("fields", tableName)
    ].concat(cacheFilters.map(f => zStorage.get(f.name + "_filter", tableName)))
  ).then(v => {
    const [view, size, sort, fields, ...savedFilters] = v;

    cacheFilters.forEach((f, i) => setupFilter(tableName, f, savedFilters[i]));
    paramFilters.forEach(f => setupFilter(tableName, f, undefined));

    const visibleColumns = (fields || []).reduce(
      (acc, cur) => (cur.vis ? acc.concat(cur.col) : acc),
      []
    );

    const columns =
      fields === undefined
        ? settings.columns
        : settings.columns
            .map(c => {
              const index = fields.findIndex(f => f.col === c.data);
              return {
                ...c,
                visible: visibleColumns.includes(c.data),
                sortIndex: index === -1 ? 9999 : index
              };
            })
            .sort((a, b) => a.sortIndex - b.sortIndex);

    callback(
      columns,
      view || settings.view,
      size || settings.size,
      (sort || settings.sort).map(([col, dir]) => {
        const newCol = settings.columns.findIndex(c => c.data === col);
        return [newCol > -1 ? newCol : 1, dir];
      })
    );
  });
}

function setupFilter(tableName, filter, cached) {
  switch (filter.type) {
    case "checkbox":
      return (cached === undefined ? filter.defaults : cached).forEach(v =>
        $(`#${tableName}_content input[value="${v}"]`).prop("checked", true)
      );
    case "select":
    case "group-select":
      return $(`#${tableName}_content select[name="${filter.name}"]`)
        .val(cached === undefined ? filter.defaults : cached)
        .trigger("change");
    // Is boolean used by any apps?
    case "boolean":
      return $(`#${tableName}_content input[name="${filter.name}"]`).prop(
        "checked",
        cached === undefined ? filter.defaults : cached
      );
  }
}

function initTable(api, tableName, settings, columns, tableFilters) {
  initViewMode(api, tableName, settings.view);
  initTableSize(api, tableName, settings.size);
  initSortEvent(api, tableName);
  initSearch(api, tableName);
  initTableSelection(api, tableName);
  initColumnEvents(api, tableName, columns);
  initTableFilters(api, tableName, tableFilters);

  $(`#${tableName}_refresh`).on("click", function(e) {
    if (
      $(`#${tableName}_content`).is(":visible") &&
      !$(this).hasClass("zc-spin")
    ) {
      api.draw(false);
    }
  });
}

function initViewMode(api, tableName, mode) {
  $(`#${tableName}_view_${mode}`).addClass("active");

  const viewModeSelectors = `#${tableName}_view_table, #${tableName}_view_grid`;
  $(viewModeSelectors).on("click", function(e) {
    if ($(this).hasClass("active")) return;

    $(viewModeSelectors).toggleClass("active");
    zStorage.set("view", e.currentTarget.id.split("_")[2], tableName);
    api
      .draw(false)
      .rows()
      .deselect();
  });
}

function getTableViewMode(tableName, fallback) {
  if ($(`#${tableName}_view_table`).hasClass("active")) return "table";
  else if ($(`#${tableName}_view_grid`).hasClass("active")) return "grid";
  else return fallback;
}

function initTableSize(api, tableName, size) {
  $("<select>", { id: "table_size", name: "table_size" }) // TODO: Not sure if this needs to be named
    .appendTo(`#${tableName}_select_container`)
    .append([10, 25, 50, 100].map(v => `<option value="${v}">${v}</option>`))
    .val(size)
    .select2({
      minimumResultsForSearch: Infinity,
      dropdownAutoWidth: true,
      width: "100%"
    })
    .on("change", function(e) {
      api.page.len(+$(this).val()).draw(false);
      zStorage.set("size", +$(this).val(), tableName);
    });
}

function initSortEvent(api, tableName) {
  api.on("order.dt", function(e) {
    zStorage.set(
      "sort",
      api.order().map(([col, dir]) => [api.column(col).dataSrc(), dir]),
      tableName
    );
  });
}

function initSearch(api, tableName) {
  $(`#${tableName}_search_btn`).on("click", () => {
    $(`#${tableName}_search_wrapper`).toggleClass("active");
    $(`#${tableName}_search`).focus();
  });

  let timer;
  $(`#${tableName}_content input[name="table[search]"]`).keydown(function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
    clearTimeout(timer);
    if ($(this).val()) {
      timer = setTimeout(function() {
        api.draw();
      }, 700);
    }
  });
}

function initTableSelection(api, tableName) {
  $(`#${tableName}_select_all`).on("click", function(e) {
    $(this)
      .find("span")
      .hasClass("z-icon-addition")
      ? api.rows().select()
      : api.rows().deselect();
  });

  api.on("select.dt deselect.dt", function(e, dt, type, indexes) {
    const count = dt.rows({ selected: true }).count();
    $(`#${tableName}_group_actions`).toggleClass("hidden", count == 0);
    $(`#${tableName}_select_all span`)
      .toggleClass("z-icon-addition", count !== dt.rows().count())
      .toggleClass("z-icon-subtraction", count === dt.rows().count());
    if (DEBUG) {
      console.log(e.type === "select" ? "Selected" : "Deselected");
      console.log(dt.rows(indexes).data());
    }
  });
}

function initColumnEvents(api, tableName, columns) {
  let dropdownReorder = false;

  $(`#${tableName}_visibility_menu`)
    .html(
      columns.map((c, i) =>
        $("<li>", { "data-key": c.data, class: "checkbox-row" }).append(
          $("<div>", { class: "checkbox checkbox-primary" }).append(
            $("<input>", {
              type: "checkbox",
              name: `${tableName}[table_column_vis][]`,
              checked: !c.hasOwnProperty("visible") || c.visible,
              value: i
            }).on("change", function(e) {
              index = api.colReorder.transpose(+$(this).val(), "toCurrent");
              api.column(index).visible($(this).is(":checked"));
              resize_iframe();
              saveColumns();
            }),
            $("<label>").html(
              (c.class || "").includes("actions") ? "Actions" : c.title
            )
          ),
          $('<span class="icon z-icon-hamburger"></span>')
        )
      )
    )
    .sortable({ axis: "y" })
    .on("sortstop", function(event, ui) {
      if (DEBUG) console.log(`Sort Stop Trigger ${tableName}`);
      dropdownReorder = true;

      api.colReorder.order(
        $(`#${tableName}_visibility_menu li input`)
          .get()
          .map(v => api.colReorder.transpose(+$(v).val(), "toCurrent"))
      );
    });

  api.on("column-reorder", function(e, settings, details) {
    if (DEBUG) console.log(`Ordering Trigger ${tableName}`, details);
    saveColumns();

    if (dropdownReorder) return (dropdownReorder = false);
    if (DEBUG) console.log(`Ordering Trigger Rebuild DropDown ${tableName}`);

    const orderedItems = api
      .columns()
      .dataSrc()
      .toArray()
      .map(v => $(`#${tableName}_visibility_menu li[data-key="${v}"]`));
    $(`#${tableName}_visibility_menu`).html(orderedItems);
  });

  function saveColumns() {
    if (DEBUG) console.log(`Save Fields ${tableName}`);

    const fields = api
      .columns()
      .indexes()
      .toArray()
      .map(i => ({
        col: api.column(i).dataSrc(),
        vis: api.column(i).visible()
      }));

    zStorage.set("fields", fields, tableName);
  }
}

function initTableFilters(api, tableName, tableFilters) {
  tableFilters.forEach(filter => {
    const cache = filter.hasOwnProperty("cache") && filter.cache;

    switch (filter.type) {
      case "checkbox":
        return checkboxFilter(api, cache, filter);
      case "select":
      case "group-select":
        return selectFilter(api, cache, filter);
      case "boolean":
        return booleanFilter(api, cache, filter);
    }
  });

  function checkboxFilter(api, cache, filter) {
    const checkboxDebounceDraw = debounce(() => {
      const f = $(
        `#${tableName}_content input[name="${filter.name}[]"]:checked`
      )
        .map((_, el) => $(el).val())
        .get();
      if (cache) zStorage.set(filter.name + "_filter", f, tableName);
      api.draw();
    }, 750);

    $(`#${tableName}_content input[name="${filter.name}[]"]`).on(
      "click",
      checkboxDebounceDraw
    );
  }

  function selectFilter(api, cache, filter) {
    $(`#${tableName}_content select[name="${filter.name}"]`).change(function() {
      const f = $(this).val();
      if (cache) zStorage.set(filter.name + "_filter", f, tableName);
      api.draw();
    });
  }

  function booleanFilter(api, cache, filter) {
    $(`#${tableName}_content input[name="${filter.name}"]`).change(function() {
      const f = $(
        `#${tableName}_content input[name="${filter.name}"]:checked`
      ).val();
      if (cache) zStorage.set(filter.name + "_filter", f, tableName);
      api.draw();
    });
  }
}