const API_URL =
    'https://gardner2019ir.q4web.com/feed/StockQuote.svc/GetStockQuoteList?apiKey=BF185719B0464B3CB809D23926182246&exchange=NYSE&symbol=IR&pageSize=1';
const STOCK_HREF = 'https://investors.irco.com';

/**
 * @typedef {Object} GetStockQuoteListResult
 * @property {number} Change
 * @property {number} High
 * @property {number} High52
 * @property {number} High52
 * @property {number} Low
 * @property {number} Low52
 * @property {number} PercChange
 * @property {number} PreviousClose
 * @property {string} TradeDate
 * @property {number} TradePrice
 * @property {number} Volume
 * @property {number} Volume2
 *
 * @typedef {Object} StockApiResponse - Stock API response from the Q4 company
 * @property {GetStockQuoteListResult[]} GetStockQuoteListResult
 */

/**
 * Creates a stock feed element and appends it right after the language selector. If the fetch fails or the
 * shouldShowStock is set to false or undefined, the element is not created.
 *
 * @param {boolean} shouldShowStock - Whether or not to show the stock feed.
 * @returns {Promise<void>}
 */
export const appendStockToHTML = async (shouldShowStock) => {
    try {
        if (!shouldShowStock) {
            return;
        }

        const langSelectorWrapper = document.querySelector('.js-globalLanguageSel').parentElement;

        if (!langSelectorWrapper) {
            return;
        }

        const stockFeedWrapper = document.createElement('div');
        stockFeedWrapper.classList.add('col-md-5');

        const res = await fetchStockFeed();

        if (!res?.GetStockQuoteListResult) {
            return;
        }

        if (!Array.isArray(res.GetStockQuoteListResult)) {
            return;
        }

        if (!res.GetStockQuoteListResult.some((i) => !!i.TradePrice || !!i.Change)) {
            return;
        }

        const stockData = res.GetStockQuoteListResult[0];

        const { TradePrice, Change } = stockData;

        const stockElement = document.createElement('a');
        stockElement.classList.add('stock-feed');
        stockElement.href = STOCK_HREF;
        stockElement.target = '_blank';

        const priceLabel = document.createElement('label');
        priceLabel.textContent = `$${TradePrice}`;

        const changeLabel = document.createElement('label');
        changeLabel.textContent = Change;
        changeLabel.classList.add('change');

        const arrow = document.createElement('div');
        arrow.classList.add('stock-arrow');
        arrow.style.marginLeft = '2px';
        const arrowClassName = Change < 0 ? 'down' : 'up';
        arrow.classList.add(arrowClassName);

        stockElement.append(priceLabel, changeLabel, arrow);
        stockFeedWrapper.append(stockElement);
        langSelectorWrapper.insertAdjacentElement('afterend', stockFeedWrapper);
    } catch (err) {
        console.log("There's a problem with the STOCK API render.", err);
    }
};

/**
 * Fetches the stock feed from the API. Returns `void` if the fetch fails.
 *
 * @returns {Promise<StockApiResponse | void>}
 */
const fetchStockFeed = async () => {
    try {
        const res = (await fetch(API_URL)).json();
        return res;
    } catch (e) {
        console.log("There's a problem with the STOCK API request. Stock feed will not be rendered.");
    }
};