import parseTable from "./parseTable.js";
import parseJobs from "./parseJobs.js";
import parseFlats from "./parseFlats.js";
import { modalNotifier, moveProgressBar } from "./evts.js";
import editConf from "./editConf.js";
import articleSort from "./sort.js";

function loadTable(table) {
  document.getElementById("mainTitle").innerHTML =
    "selected table: " + table.replace(/_/g, " ");
  activeState.loadedtable = table;

  document.getElementById("navMob").className = document
    .getElementById("navMob")
    .className.replace(" w3-show", "");

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      let resp;
      try {
        resp = JSON.parse(this.responseText);
      } catch {
        console.log(this.responseText);
      } finally {
        parseTable(resp);
      }
    }
  };
  xhttp.open("GET", "api/dbRead/" + table, true);
  xhttp.send();
}

function loadNewArticles(type = "none") {


  let reqUrl;
  let loadingNewArticlesProgressValue;

  if (window.location.href.indexOf("flats") != -1) type = "flats";
  if (window.location.href.indexOf("jobs") != -1) type = "jobs";

  switch (type) {
    case "jobs":
      reqUrl = "api/soup/quick";
      loadingNewArticlesProgressValue = 35;
      break;
    case "flats":
      reqUrl = "api/soup/quick/flats";
      loadingNewArticlesProgressValue = 55;
      break;
    default:
      return;
  }

  //set current loaded site in active state
  window.activeState["loadedtable"] = type;

  document.getElementById("navMob").className = document
    .getElementById("navMob")
    .className.replace(" w3-show", "");

  modalNotifier(
    '\
    fetching new articles \
    <div class="w3-flat-silver"> \
    <div id="loadingNewArticlesProgress" class="w3-container w3-flat-nephritis" style="height: 24px; width: 0%"></div> \
    </div> \
  ',
    0,
    false
  );
  moveProgressBar(loadingNewArticlesProgressValue);

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      let resp;
      try {
        resp = JSON.parse(this.responseText);
      } catch (e) {
        modalNotifier(
          '<i class="fa fa-exclamation-triangle" style="font-size: 1.3em"></i> <b> Error:</b> Could not get data from crawler',
          0,
          false
        );
        return;
      }

      //handle sorting here

      let articleArray = [];
      for (let id in resp) {
        articleArray.push(resp[id]);
      }

      articleArray = articleSort(articleArray, "byDate");
      articleArray = articleSort(articleArray, "byPrio");

      window.activeState["articles"] = articleArray;
      if (type == "jobs") parseJobs(articleArray);
      if (type == "flats") pagination(1, articleArray, parseFlats);
    }
  };
  xhttp.open("GET", reqUrl, true);
  xhttp.send();
}

function loadNavBar() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      let res;
      try {
        res = JSON.parse(this.responseText);
      } catch (e) {
        console.log(this.responseText, e);
        return;
      }
      let divMob = document.getElementById("navMob");
      for (let x in res) {
        let aMob = document.createElement("a");

        aMob.setAttribute("href", "#");
        aMob.setAttribute("data-table", res[x][0]);
        aMob.classList.add("w3-bar-item", "w3-button", "w3-padding-large");
        aMob.innerHTML = res[x][0];

        divMob.appendChild(aMob);
      }
      let createEntry = document.createElement("a");
      createEntry.setAttribute("href", "#");
      createEntry.setAttribute("data-table", "createNew");
      createEntry.classList.add("w3-bar-item", "w3-button", "w3-padding-large");
      createEntry.innerHTML = "Edit Configuration";

      divMob.appendChild(createEntry);
      divMob.addEventListener("click", (e) => {
        if (e.target && e.target.matches("a.w3-bar-item")) {
          let table = e.target.dataset.table;
          if (table == "createNew") {
            editConf();
            return;
          }
          loadTable(table);
        }
      });
    }
    //Load new articles in case that url has soup source
    loadNewArticles();
  };
  xhttp.open("GET", "api/dbRead/tables", true);
  xhttp.send();
}

function loadArticlesForPagination(page = 1) {
  let articles = window.activeState["articles"];
  window.activeState["currentPage"] = page;

  let type = window.activeState["loadedtable"];

  if (type == "") {
    console.log("on which page are you on?");
  }

  if (articles == "") {
    loadNewArticles(type);
  }

  if (type == "jobs") pagination(page, articles, parseJobs);
  if (type == "flats") pagination(page, articles, parseFlats);
}

function pagination(currentPage, articles, callBack) {
  //const queryString = window.location.search;
  //const urlParams = new URLSearchParams(queryString);
  //let currentPage = urlParams.get('page');

  if (currentPage == null || currentPage == "") {
    currentPage = 1;
  } else {
    currentPage = parseInt(currentPage);
  }

  let itemsAmount = 10;
  let itemsTotal = articles.length;
  let pagesTotal = Math.floor(itemsTotal / itemsAmount);
  let pagedArticles = [];

  let loopEnd;
  let loopStart;
  if (currentPage == 1) {
    loopEnd = itemsAmount;
    loopStart = 0;
  } else {
    loopEnd = currentPage * itemsAmount;
    loopStart = (currentPage - 1) * itemsAmount;
  }

  for (let i = loopStart; i < loopEnd; i++) {
    pagedArticles.push(articles[i]);
  }

  //setup page button
  let pageDiv = document.getElementById("pagination");
  pageDiv.innerHTML = "";

  //if (screen.width < 993) {
  if (screen.width < 993) {
    let pageBtn = document.createElement("span");
    pageBtn.id = "pageButton";
    pageBtn.classList.add("w3-button", "w3-large", "w3-flat-asbestos");
    pageBtn.innerText = "Next";
    pageBtn.addEventListener("click", () => {
      window.scrollTo(0, 0);
      loadArticlesForPagination(currentPage + 1);
    });
    pageDiv.appendChild(pageBtn);
  } else {
    let div = document.createElement("div");

    let pageCount = currentPage;

    //let a = document.createElement('a');
    //a.href = '#';
    //a.innerHTML = '&laquo;';
    //a.classList.add("w3-button", "w3-large", "w3-hover-grey");
    //div.appendChild(a);

    if (pageCount > 2) {
      pageCount = pageCount - 2;
    }
    if (currentPage == 2) {
      pageCount = pageCount - 1;
    }

    for (let i = 0; i < 5; i++) {
      let a = document.createElement("a");
      a.href = "#";
      a.innerText = pageCount;
      if (pageCount == currentPage) {
        a.classList.add("w3-button", "w3-xlarge", "w3-hover-grey");
      } else {
        a.classList.add("w3-button", "w3-large", "w3-hover-grey");
      }
      div.appendChild(a);
      pageCount++;
    }

    //a = document.createElement('a');
    //a.href = '#';
    //a.innerHTML = '&raquo;';
    //a.classList.add("w3-button", "w3-large", "w3-hover-grey");
    //div.appendChild(a);

    pageDiv.appendChild(div);
    pageDiv.addEventListener("click", (e) => {
      if (e.target && e.target.matches("a.w3-button")) {
        let page = e.target.innerHTML;
        loadArticlesForPagination(page);
      }
    });
  }

  callBack(pagedArticles);
}

export { loadTable, loadNavBar, loadNewArticles };