// Cookie Settings
document.cookie = 'same-site-cookie=foo; SameSite=Lax';
document.cookie = 'cross-site-cookie=bar; SameSite=None; Secure';

chrome.storage.sync.get(
    function(options) {
        // Skapa knappen
        var btnReplace = document.createElement("BUTTON");
        btnReplace.innerHTML = "Insert Steam Market Price";
        btnReplace.onclick = function(){replacePrices()};
        btnReplace.style.cssText = 'background: linear-gradient(to right, #e9b10b 50%, #24252f 50%); background-size: 200% 100%; background-position: right bottom; color: #e9b10b; padding: 1em; margin-left: 1.875rem; border-radius: 3px; font-size: .8125rem; font-weight: 700;  border: 1px solid #e9b10b; width: 12.5rem; height: 2.9rem;';

        // Placera knappen
        setTimeout(placeButton, 3500);

        function placeButton() {
            document.getElementsByClassName("price-range-compact")[0].appendChild(btnReplace);
        }

        function resetButton() {
            btnReplace.style.cssText = 'background: linear-gradient(to right, #e9b10b 50%, #24252f 50%); background-size: 200% 100%; background-position: 100%; transition: all 3s ease-out; color: #e9b10b; padding: 1em; margin-left: 1.875rem; border-radius: 3px; font-size: .8125rem; font-weight: 700;  border: 1px solid #e9b10b; width: 12.5rem; height: 2.9rem;';
        }

        // Udda nummer är wear
        // Jämna nummer är skinet
        // 0 är ett annat element
        let bundleNumber = 0;
        let bothNumber = 0;
        let wearNumber = 1;
        let skinNumber = 2;
        let alreadyExecuted = false;
        let priceNumber = 0;
        let bundleActive = false;
        var skins = [];
        let itemNumber = 0;
        let sortBy;

        // Prisrutan
        let prices;

        function replacePrices() {
            // Prisrutan
            prices = document.getElementsByClassName('item__price');

            sortBy = document.getElementsByClassName('v-popover')[2].textContent.trim();

            // Ändra Knappen
            btnReplace.innerHTML = "Reload Steam Market Prices";
            btnReplace.onclick = function(){reloadPrices()};

            for (i = 0; i < 5; i++) {
                secondaryButton = document.getElementsByClassName('button-secondary')[i];

                if (options.priceSource === 'lootfarm') {
                    if (secondaryButton.classList.contains('button-secondary--gold')) {
                        if (i === 0 || i === 1) {
                            foundPriceSource = options.priceSource + 'csgo';
                        }

                        if (i === 2) {
                            foundPriceSource = options.priceSource + 'dota2';
                        }

                        if (i === 3) {
                            foundPriceSource = options.priceSource + 'rust';
                        }

                        if (i === 4) {
                            foundPriceSource = options.priceSource + 'h1z1';
                        }
                    }
                } else {
                    foundPriceSource = options.priceSource;
                }
            }

            chrome.runtime.sendMessage(
                {priceSource: 'getItems'},
                marketName => {
                    skins = marketName;
            });
            itemNumber += 1;

            getPrices();
        }

        function getPrices() {
            alreadyExecuted = false;
            for (elt of prices) {
                chrome.runtime.sendMessage(
                    {priceSource: foundPriceSource, itemURL: skins[priceNumber], id: priceNumber},
                    price => {
                        // Create Div
                        var valueIcon = document.createElement('div');
                        valueIcon.innerHTML = '<div style="background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Steam_icon_logo.svg/512px-Steam_icon_logo.png) 50%/100% auto no-repeat; height: 1rem; width: 1rem; margin-left: 0.7rem; margin-right: 0.35rem;"></div>'
                        valueIcon.id = 'valueIcon';

                        // Create Span
                        var value = document.createElement('span');
                        value.textContent = price.value;
                        value.style.cssText = 'font-size: .8125rem; color: silver; font-weight: 700;';
                        value.id = 'valueSpan';

                        // Append Those
                        document.getElementsByClassName('item__price')[price.id].appendChild(valueIcon);
                        document.getElementsByClassName('item__price')[price.id].appendChild(value);

                        // Loading Bar
                        var idAmount = document.querySelectorAll('[id$=valueIcon]');
                        loaded = idAmount.length / skins.length * 100;
                        loaded = 100 - loaded;
                        btnReplace.style.cssText = 'background: linear-gradient(to right, #e9b10b 50%, #24252f 50%); background-size: 200% 100%; background-position:' + loaded + '%; transition: all .5s ease-out; color: #fff; text-shadow: 2px 2px 4px #000000; padding: 1em; margin-left: 1.875rem; border-radius: 3px; font-size: .8125rem; font-weight: 700; border: 1px solid #e9b10b; width: 12.5rem; height: 2.9rem;';

                        window.setInterval(function(){ // Set interval for checking
                            if (alreadyExecuted == false) {
                                if(loaded != 0){
                                    resetButton();
                                    alreadyExecuted = true;
                                }
                            }
                        }, 25000);

                    });

                priceNumber = priceNumber + 1;
            }
        }

        function reloadPrices() {
            for (elt of prices) {
                if (document.getElementById('valueIcon')) {
                    var removeValueIcon = document.getElementById('valueIcon');
                    removeValueIcon.remove();
                }

                if (document.getElementById('valueSpan')) {
                    var removeValue = document.getElementById('valueSpan');
                    removeValue.remove();
                }
            }

            bundleNumber = 0;
            bothNumber = 0;
            wearNumber = 1;
            skinNumber = 2;
            priceNumber = 0;
            skins = [];
            prices = '';
            replacePrices();
        }
});