// ==UserScript==
// @name         Best Buy Queue Automation
// @namespace    akito
// @version      1.5.0
// @description  Auto-presses drops when button changes to Add
// @author       akito
// @match        https://www.bestbuy.com/*skuId=*
// @match        https://www.bestbuy.com/site/combo/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

// Version Changelog
// 1.0.0 - Initial Version
// 1.1.1 - I honestly forgot what I changed here
// 1.2.0 - Fixed observer to correctly receive element stimulus from JS
// 1.3.0 - Added this useless bottom banner thing
// 1.3.1 - Little more verbose output for what exactly script is doing
// 1.4.0 - Changed workings to check for aria-described-by for overlay?
// 1.5.0 - Changed workings to check rendered button color, hopefully works now

const title = "Best Buy (Product Details) Automation by akito#9528";

// Quick dirty function which checks the rendered button color for availability.
function buttonAvailable(button) {
    return window.getComputedStyle(button, null).getPropertyValue("background-color") === "rgb(255, 224, 0)";
}

// main function body
(function() {
    'use strict'; // necessary?

    // initialize bottom status banner
    let banner = document.createElement("div");
    banner.style.position = "fixed"; banner.style.bottom = "0px"; banner.style.zIndex = 100;
    banner.style.width = "100%"; banner.style.padding = "4px"; banner.style.textAlign = "center";
    banner.style.backgroundImage = "linear-gradient(to right, coral, crimson, coral, crimson)";
    banner.innerHTML = `${title} | Initializing script`;

    // Mutation Observer to detect HTML changes to the "Add to Cart" / "Please Wait" button
    // The script waits until the button color changes from grey (Please Wait) back to yellow (Add to Cart).
    // At that point, it clicks the button, plays a fancy notification sound, and opens a new window with express checkout.
    // > Note: untested on actual drops, only manually tested by manually changing the HTML
    // > Note: only tested on changing of element's classes, unsure if changes within a class cause mutation
    document.addEventListener("DOMContentLoaded", async function() {
        document.body.append(banner); // add banner to DOM

        // check current product status (available, sold out, waiting)
        const cartButton = document.getElementsByClassName("add-to-cart-button")[0];
        const soldOut = cartButton.classList.contains("btn-disabled"); // disabled button
        let initAvailable = buttonAvailable(cartButton);
        banner.innerHTML = soldOut ? `${title} | Product currently sold out, script non-functioning`
            : initAvailable ? `${title} | Add button clickable, please click to initialize product queue`
            : `${title} | Existing product queue detected, waiting for button availability change`;
        if(soldOut) { // don't run script on sold out products
            return;
        }

        // actual mutation observer which checks for element changes
        let currentAvailable;
        const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
        let observer = new MutationObserver(async function(mutations, observer) {
            await new Promise(r => setTimeout(r, 500)); // wait for animation to settle

            // check whether the mutation modified the button color at all
            currentAvailable = buttonAvailable(cartButton);
            if(initAvailable === true && currentAvailable === false) {
                // button clicked to enter queue (yellow => grey)
                banner.innerHTML = `${title} | Queue entry detected, waiting for button availability change`;

                initAvailable = false;
            } else if(initAvailable === false && currentAvailable === true) { // product now available from queue
                // product avialable (grey => yellow)
                banner.innerHTML = `${title} | Availability change detected, button clicked and window opened! Good luck!`;

                // click button, play audio, and open window
                cartButton.click();
                window.open("https://www.bestbuy.com/checkout/r/fast-track");
                const audio = new Audio("https://proxy.notificationsounds.com/notification-sounds/definite-555/download/file-sounds-1085-definite.mp3");
                audio.play();

                observer.disconnect();
            }
        });
        observer.observe(cartButton, {
            attributes: true,
            characterData: true,
            childList: true,
            subtree: true,
            attributeOldValue: true,
            characterDataOldValue: true
        });
    });
}());