// ==UserScript==
// @name        Kelco Price Sort
// @namespace   https://sandorex.xyz/
// @homepageURL https://gist.github.com/sandorex/a222ca6c0d6bba783c12fc7b312a536b
// @downloadURL https://gist.githubusercontent.com/sandorex/a222ca6c0d6bba783c12fc7b312a536b/raw/kelco-price-sort.user.js
// @match       http://www.kelco.rs/katalog/*
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_registerMenuCommand
// @noframes
// @version     1.1
// @author      Sandorex
// @description Sorts components by price
// ==/UserScript==

// ==== violentmonkey stuff ====
const ORDER_VALUE_KEY = 'highToLow';

function toggleOrder() {
  GM_setValue(ORDER_VALUE_KEY, !GM_getValue(ORDER_VALUE_KEY, false));
  
  // reload the window so it takes effect
  window.location.reload(false);
}

if (GM_getValue(ORDER_VALUE_KEY, false))
  GM_registerMenuCommand("Switch to LOW -> HIGH", toggleOrder);
else
  GM_registerMenuCommand("Switch to HIGH -> LOW", toggleOrder);

// ==== the actual code ====

function getPrice(elem) {
	return parseFloat(elem.querySelector('.svecene > .cena').textContent.replace(/\./, '').replace(/,/, '.'));
}

function compareItems(a, b) {
	if (getPrice(a) < getPrice(b)) {
		return -1;
	}
	
	if (getPrice(a) > getPrice(b)){
		return 1;
	}
	
	return 0;
}


const productsDiv = document.querySelector('.main_content > .products_list');

// skip pages without actual components shown
if (productsDiv == undefined)
  return;

document.querySelector('.main_content > .page_title').textContent += ' (Price ' + (GM_getValue(ORDER_VALUE_KEY, false) ? 'HIGH -> LOW' : 'LOW -> HIGH') + ')';

let items = [];
productsDiv.querySelectorAll('.row > .asinItem').forEach(e => {
	e.classList.remove('last');
	items.push(e.cloneNode(true));
});

// remove all the items
productsDiv.querySelectorAll('.row:not(.end)').forEach(e => e.remove());

// sort them
items.sort(compareItems);

// reverse if enabled, so that it's sorted high to low
if (GM_getValue('highToLow', false))
  items.reverse();

// recreate the rows
let count = 0;
let div = document.createElement('div');
items.forEach(e => {
	div.appendChild(e);
	
	if (count++ == 3) {
		// idk what it does but it is there by default on last element
		// of each row
		e.classList.add('last');
		
		// add the new row
		div.classList.add('row');
		productsDiv.appendChild(div);
		
		// new row
		div = document.createElement('div');
		count = 0;
	}
});

// add the leftovers
if (count > 0) {
  div.lastChild.classList.add('last');
  div.classList.add('row');
  productsDiv.appendChild(div);
}