var state = {
  'querySet': [{
    "clientUUID": "436c4774-038f-4540-9c18-2691ca9b53d4",
    "mockedResponseId": 1908998,
    "mediaType": "application/xml",
    "messageBody": "body",
    "httpHeaders": null,
    "httpStatus": 200
  }],

  'page': 1,
  'rows': 10,
  'window': 5,
}

var myList, data, previousSort;
state.querySet = listForPagination;
buildTable();

for (let i = 3; i >= 0; i--) {
  document.querySelector('#btn-sort-' + i).addEventListener('click', function() {
    addButtonListeners(i)
  })
}

function addButtonListeners(i) {
  var buttons = document.querySelectorAll('.btn-sort');
  for (var j = buttons.length - 1; j >= 0; j--) {
    buttons[j].classList.remove('activeButton');
  }
  document.querySelector('#btn-sort-' + i).classList.add('activeButton');
  buildTable();
}


function pagination(querySet, page, rows) {

  var trimStart = (page - 1) * rows
  var trimEnd = trimStart + rows
  var trimmedData = querySet.slice(trimStart, trimEnd)
  var pages = Math.ceil(querySet.length / rows);
  if (pages === 0) {
    pages = 1
  }
  return {
    'querySet': trimmedData,
    'pages': pages,
  }
}


function pageButtons(pages) {
  var wrapper = document.getElementById('pagination-wrapper');

  wrapper.innerHTML = ``;
  var maxLeft = (state.page - Math.floor(state.window / 2))
  var maxRight = (state.page + Math.ceil(state.window / 2))
  if (maxLeft < 1) {
    maxLeft = 1
    maxRight = state.window
  }

  if (maxRight > pages) {
    maxLeft = pages - (state.window - 1)

    if (maxLeft < 1) {
      maxLeft = 1
    }
    maxRight = pages
  }

  for (var page = maxLeft; page <= maxRight; page++) {
    if (page === state.page) {
      wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info" name="allMessagesClicked">${page}</button>`
    } else {
      wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info">${page}</button>`
    }
  }
  if (state.page != 1) {
    wrapper.innerHTML = `<button value=${1} class="page btn btn-sm btn-info">&#171; First</button>` + wrapper.innerHTML
  }
  if (state.page != pages) {
    wrapper.innerHTML += `<button value=${pages} class="page btn btn-sm btn-info">Last &#187;</button>`
  }
  $('.page').on('click', function() {
    $('#table-body').empty()

    state.page = Number($(this).val())

    buildPage()
  })

}

function showBody(elt){
    $("#" + elt.id + "-body").toggle();
}

function showTable() {
  var table = $('#table-body')
  table.empty();
  var color;
  console.log(myList);
  for (var i = 1; i <= myList.length; i++) {
    var j = i + (state.page - 1) * 10;
    i % 2 === 0 ? color = "#b3ffff" : color="#e6ffff";
      var row = `<tr bgcolor="${color}" id="etrack-tr-${j}" onclick="showBody(this)" name="tr-button">
                    <td>` + j + `</td>
                    <td>${myList[i-1].messageId}</td>
                    <td>${myList[i-1].dateTimeStamp}</td>
                    <td>${myList[i-1].interfaceName}</td>
                    </tr>
                    <tr bgcolor="${color}" id="etrack-tr-${j}-body" name="tr-body" hidden>
                    <td colspan="4">"${JSON.stringify(myList[i-1].message)}"</td>
                    </tr>`
    table.append(row)


  }
  for (var i = myList.length + 1; i <= state.rows; i++) {
    i % 2 === 0 ? color = "#b3ffff" : color="#e6ffff";
    var j = i + (state.page - 1) * 10;
      var row = `<tr bgcolor="${color}">
                        <td>` + j + `</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        `
    table.append(row)
  }

  pageButtons(data.pages)
}


function sortTable() {
  var sortBy = document.querySelector('.activeButton').textContent
  switch (sortBy) {
    case "MessageId":
      if (previousSort === "MessageId") {
        state.querySet.sort((a, b) => (a.messageId > b.messageId) ? -1 : ((b.messageId > a.messageId) ? 1 : 0));
      } else {
        state.querySet.sort((a, b) => (a.messageId > b.messageId) ? 1 : ((b.messageId > a.messageId) ? -1 : 0));
      }
      break;
    case "TimeStamp":
      if (previousSort === "TimeStamp") {
        state.querySet.sort((a, b) => (a.dateTimeStamp > b.dateTimeStamp) ? -1 : ((b.dateTimeStamp > a.dateTimeStamp) ? 1 : 0));
      } else {
        state.querySet.sort((a, b) => (a.dateTimeStamp > b.dateTimeStamp) ? 1 : ((b.dateTimeStamp > a.dateTimeStamp) ? -1 : 0));
      }
      break;
    case "Action":
      if (previousSort === "Action") {
        state.querySet.sort((a, b) => (a.interfaceName > b.interfaceName) ? -1 : ((b.interfaceName > a.interfaceName) ? 1 : 0));
      } else {
        state.querySet.sort((a, b) => (a.interfaceName > b.interfaceName) ? 1 : ((b.interfaceName > a.interfaceName) ? -1 : 0));
      }
      break;
  }
  if (previousSort === sortBy) {
    previousSort = ""
  } else previousSort = sortBy;
}

function prepareTable() {
  data = pagination(state.querySet, state.page, state.rows)
  myList = data.querySet
}

function buildTable() {
  sortTable();
  prepareTable();
  showTable();
}

function buildPage() {
  prepareTable();
  showTable();
}