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,
}

state.querySet = mockedMessageDtoList;
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);

  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())

    buildTable()
  })

}


function buildTable() {
  var table = $('#table-body')

  var data = pagination(state.querySet, state.page, state.rows)
  var myList = data.querySet
    for(var i = 1; i<=myList.length; i++){
    var j = i + (state.page-1) * 10;
  if(i%2 === 0){
      var row = `<tr bgcolor="#b3ffff">
                    <td>` + j + `</td>
                    <td>${myList[i-1].mockedResponseId}</td>
                    <td>${myList[i-1].mediaType}</td>
                    <td>${myList[i-1].httpStatus}</td>
                    <td>
                      <button type="submit" name="updateMessage" value="${myList[i-1].mockedResponseId}">
                      <img src="/img/update-button.png" style="width: 20px;"/>
                      </button>
                    </td>
                    <td>
                      <button type="submit" name="removeMessage" value="${myList[i-1].mockedResponseId}">
                      <img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
                      </button>
                    </td>
                    `
  }else{
      var row = `<tr bgcolor="#e6ffff">
                    <td>` + j + `</td>
                    <td>${myList[i-1].mockedResponseId}</td>
                    <td>${myList[i-1].mediaType}</td>
                    <td>${myList[i-1].httpStatus}</td>
                    <td>
                      <button type="submit" name="updateMessage" value="${myList[i-1].mockedResponseId}">
                      <img src="/img/update-button.png" style="width: 20px;"/>
                      </button>
                    </td>
                    <td>
                      <button type="submit" name="removeMessage" value="${myList[i-1].mockedResponseId}">
                      <img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
                      </button>
                    </td>
                    `
 }

    table.append(row)
  }

  pageButtons(data.pages)
}