// ==UserScript==
// @name         Steam Card Exchange Enhancer
// @description  This will add the column 'Price per Badge' to Inventory Watchlist in Steam Card Exchange
// @version      2.0.5
// @author       gonza7aav
// @match        https://www.steamcardexchange.net/index.php?userlist
// @grant        none
// @run-at       context-menu
// @icon         https://www.steamcardexchange.net/include/design/img/favicon_blue_small.png
// ==/UserScript==

(function () {
  'use strict';

  const table = document.querySelector('#private_watchlist');

  addNewColumn(table);
  fillNewColumn(table);

  // refills when any switch state is changed
  [...document.querySelectorAll('[type=checkbox]')].forEach((x) => {
    x.addEventListener('change', () => fillNewColumn(table));
  });

  // refills when the table length is changed
  document
    .querySelector('[name=private_watchlist_length]')
    .addEventListener('change', () => fillNewColumn(table));

  // refills when search something
  document
    .querySelector('[type=search]')
    .addEventListener('input', () => fillNewColumn(table));

  // refills when the page is changed
  document
    .querySelector('#private_watchlist_paginate')
    .addEventListener('click', (event) => {
      if (event.target.className?.includes('paginate_button')) fillNewColumn(table);
    });
})();

function addNewColumn (table) {
  const tableHeader = table.children[0];

  // adds a new column header
  const newColumnHeader = document.createElement('th');
  newColumnHeader.innerHTML = 'Price per Badge';
  newColumnHeader.id = 'price_per_badge_header';
  newColumnHeader.className = 'w-36 sorting';
  tableHeader.children[0].appendChild(newColumnHeader);

  // fixes style of name column
  // tableHeader.children[0].children[0].style = 'width: 45%';

  const otherColumnHeaders = [
    ...document.querySelectorAll('.sorting'),
    ...document.querySelectorAll('.sorting_asc'),
    ...document.querySelectorAll('.sorting_desc'),
  ].filter((x) => x.id != 'price_per_badge_header');

  // adds behavior to a click in the new header
  newColumnHeader.addEventListener('click', () => {
    // changes style and sorts
    const order = newColumnHeader.className.includes('sorting_asc') ? 'desc' : 'asc';
    newColumnHeader.className = newColumnHeader.className.replace(/sorting_?(asc|desc)?/, `sorting_${order}`);
    sortNewColumn(table, order);

    // changes style in the others headers
    otherColumnHeaders.forEach((x) => {
      x.className = x.className.replace(/sorting_(asc|desc)?/, 'sorting');
    });
  });

  // sorting others columns will make changes in the new column
  otherColumnHeaders.forEach((x) => {
    x.addEventListener('click', () => {
      // style
      newColumnHeader.className = newColumnHeader.className.replace(/sorting_(asc|desc)?/, 'sorting');

      // content
      fillNewColumn(table);
    });
  });
};

// function to sort the body of the table
function sortNewColumn (table, order) {
  const tableBody = table.children[1];

  const rows = [...tableBody.rows];

  while (tableBody.length > 0) {
    tableBody.deleteRow(0);
  }

  rows.sort((a, b) => {
    if (order == 'asc') {
      return (
        Number.parseInt(a.children[5].innerText) -
        Number.parseInt(b.children[5].innerText)
      );
    } else {
      return (
        Number.parseInt(b.children[5].innerText) -
        Number.parseInt(a.children[5].innerText)
      );
    }
  });

  for (let i = 0; i < rows.length; i++) {
    // i + 1 because the array start at 0
    if ((i + 1) % 2 == 0) {
      rows[i].className = 'even';
    } else {
      rows[i].className = 'odd';
    }

    tableBody.appendChild(rows[i]);
  }
};

function fillNewColumn (table) {
  const tableBody = table.children[1];

  // empties the content of the column
  [...document.querySelectorAll('#price_per_badge_cell')].forEach((x) => x.remove());

  // adds body entries to Price per Badge column
  for (const row of tableBody.rows) {
    // gets cards info
    const cardPrice = Number.parseInt(row.cells[1].innerText);
    const cardsPerBadge = Number.parseInt(row.cells[3].innerText);
    const pricePerBadge = cardPrice * cardsPerBadge;

    // creates a cell and append it
    const newCell = document.createElement('td');
    newCell.innerText = pricePerBadge;
    newCell.id = 'price_per_badge_cell';
    row.appendChild(newCell);
  }
};