//############################################ FAKE TABLE FOR INITIAL LOADING THE PAGE #########
//############################################ FAKE TABLE FOR INITIAL LOADING THE PAGE #########
document.addEventListener('DOMContentLoaded', () => {
    async function fetchFakeTable() {
        try {
            const response = await fetch("https://cdn.afterprime.com/jsons/symbols_all.json");

            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }

            const symbols = await response.json();
            const filteredPop = symbols.filter(symbol => symbol.popular === true);

            const tableBody = document.getElementById('fakeRows');
            let htmlString = '';
            filteredPop.forEach(symbol => {
                console.log(symbol.instrument)
                htmlString += `
            <tr class="has-expanded-itemsX">
                    <td class="instrument-name">
                        <div class="d-iflx flxwrp instru-with-icon">
                            ${
                    symbol.instrument === 'forex' ? `
                                        <span class="tv-circle-logo-pair tv-circle-logo-pair--xlarge tv-category-header__icon">
                                            <img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon}">
                                            <img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon_2}">
                                        </span>
                                ` : `<img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon}">`
                }


                            <div class="ap-instrument">${symbol.id}
                                <span>${symbol.name}</span>
                            </div>
                        </div>
                    </td>
                    <td col-title="Bid">
                        <div class="ap-instrument-price" id="">
                        <div class="spinner">
                                              <div class="bounce1"></div>
                                              <div class="bounce2"></div>
                                              <div class="bounce3"></div>
                                            </div>
</div>
                    </td>
                    <td col-title="Spread"><div class="pips-rate" id="">
                    <div class="spinner">
                                              <div class="bounce1"></div>
                                              <div class="bounce2"></div>
                                              <div class="bounce3"></div>
                                            </div>
</div></td>
                    <td col-title="Ask"><div class="ap-instrument-price" id="">
                    <div class="spinner">
                                              <div class="bounce1"></div>
                                              <div class="bounce2"></div>
                                              <div class="bounce3"></div>
                                            </div>
</div></td>
                    <td class="trade-btn txt-al-r">
                        <a href="https://app.afterprime.com/live" target="_blank" class="btn btn-small">Trade</a>
                        <a href="#" target="_blank" class="symbol-info">
                            <span class="ap-icon ap-icon-info"></span>
                        </a>
                    </td>
                </tr>
    `;
            });
            tableBody.innerHTML = htmlString;
        } catch (error) {
            console.error('Failed to fetch stock data:', error);
        }
    }

    fetchFakeTable();


});
//############################################ FAKE TABLE FOR INITIAL LOADING THE PAGE #########
//############################################ FAKE TABLE FOR INITIAL LOADING THE PAGE #########

window.onload = function () {
    let idsPopular = [];
    let idsForex = [];
    let idsCrypto = [];
    let idsCommo = [];
    let idsIndices = [];
    let idsStocks = [];
    let idsBonds = [];

    const fakeTable = document.getElementById('fakeTable');
    const firstTable = document.getElementById('instPopular');

    async function fetchPopularData() {
        try {
            const response = await fetch("https://cdn.afterprime.com/jsons/symbols_all.json");
            const symbols = await response.json();
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            const filterPopular = symbols.filter(symbol => symbol.popular === true);
            idsPopular = filterPopular.map(symbol => symbol.id);

            const tableBody = document.getElementById('dynamicRowsPopular');
            let htmlString = '';
            filterPopular.forEach(symbol => {
                console.log(symbol.instrument)
                htmlString += `
            <tr class="has-expanded-itemsX">
                    <td class="instrument-name">
                        <div class="d-iflx flxwrp instru-with-icon">
                            ${
                    symbol.instrument === 'forex' ? `
                                        <span class="tv-circle-logo-pair tv-circle-logo-pair--xlarge tv-category-header__icon">
                                            <img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon}">
                                            <img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon_2}">
                                        </span>
                                ` : `<img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon}">`
                }


                            <div class="ap-instrument">${symbol.id}
                                <span>${symbol.name}</span>
                            </div>
                        </div>
                    </td>
                    <td col-title="Bid">
                        <div class="ap-instrument-price" id="pop_${symbol.id}BID"></div>
                    </td>
                    <td col-title="Spread"><div class="pips-rate" id="pop_${symbol.id}S"></div></td>
                    <td col-title="Ask"><div class="ap-instrument-price" id="pop_${symbol.id}ASK"></div></td>
                    <td class="trade-btn txt-al-r">
                        <a href="https://app.afterprime.com/live" target="_blank" class="btn btn-small">Trade</a>
                        <a href="/${symbol.instrument}/${symbol.urlParam}/" target="_blank" class="symbol-info">
                            <span class="ap-icon ap-icon-info"></span>
                        </a>
                    </td>
                </tr>
    `;
            });
            tableBody.innerHTML = htmlString;
        } catch (error) {
            console.error('Failed to fetch stock data:', error);
        }
    }

    fetchPopularData();

    async function fetchSymbols(instrumentName, tableBodyId) {
        try {
            const response = await fetch("https://cdn.afterprime.com/jsons/symbols_all.json");
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            const symbols = await response.json();

            // Filter symbols based on category
            const filteredSymbols = symbols.filter(symbol => symbol.instrument === instrumentName);
            const ids = filteredSymbols.map(symbol => symbol.id);  // Collect IDs based on category

            const tableBody = document.getElementById(tableBodyId);
            let htmlString = '';

            filteredSymbols.forEach(symbol => {
                htmlString += `
                <tr class="has-expanded-itemsX">
                    <td class="instrument-name">
                        <div class="d-iflx flxwrp instru-with-icon">
                            ${
                    symbol.instrument === 'forex' ? `
                                    <span class="tv-circle-logo-pair tv-circle-logo-pair--xlarge tv-category-header__icon">
                                        <img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon}">
                                        <img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon_2}">
                                    </span>
                                ` : `<img decoding="async" class="tv-circle-logo tv-circle-logo--xlarge tv-category-header__icon" src="${symbol.icon}">`
                }
                            <div class="ap-instrument">${symbol.id}
                                <span>${symbol.name}</span>
                            </div>
                        </div>
                    </td>
                    <td col-title="Bid">
                        <div class="ap-instrument-price" id="${symbol.id}BID"></div>
                    </td>
                    <td col-title="Spread"><div class="pips-rate" id="${symbol.id}S"></div></td>
                    <td col-title="Ask"><div class="ap-instrument-price" id="${symbol.id}ASK"></div></td>
                    <td class="trade-btn txt-al-r">
                        <a href="https://app.afterprime.com/live" target="_blank" class="btn btn-small">Trade</a>
                        <a href="/${symbol.instrument}/${symbol.urlParam}/" target="_blank" class="symbol-info">
                            <span class="ap-icon ap-icon-info"></span>
                        </a>
                    </td>
                </tr>`;
            });

            tableBody.innerHTML = htmlString;
            return ids;  // Return the IDs for WebSocket processing
        } catch (error) {
            console.error('Failed to fetch stock data:', error);
        }
    }

    async function fetchAllCategories() {
        idsForex = await fetchSymbols("forex", 'dynamicRows');
        idsCrypto = await fetchSymbols("crypto", 'dynamicRowsCrypto');
        idsCommo = await fetchSymbols("commodities", 'dynamicRowsCommo');
        idsIndices = await fetchSymbols("indices", 'dynamicRowsIndices');
        idsStocks = await fetchSymbols("stocks", 'dynamicRowsStocks');
        idsBonds = await fetchSymbols("bonds", 'dynamicRowsBonds');
    }

    fetchAllCategories();



    function getPrice(asset, ask, bid, as, bs) {
        const bidPriceId = document.getElementById("" + asset + 'BID');
        const askPriceId = document.getElementById("" + asset + 'ASK');
        const spreadId = document.getElementById("" + asset + 'S');
        const numToString = bid.toString();
        const decimalPart = numToString.split('.')[1];
        const lengthOfDecimal = decimalPart ? decimalPart.length : 0;
        if (lengthOfDecimal <= 5) {
            spreadId.innerHTML = ((ask - bid) * 10000).toFixed(2);
        } else {
            spreadId.innerHTML = ((ask - bid) * 10000).toFixed(2);
        }
        if (lengthOfDecimal < 4) {
            spreadId.innerHTML = ((ask - bid)).toFixed(2);
        }
        if (lengthOfDecimal == 4) {
            bidPriceId.innerHTML = formatAndWrapLastTwoDigits(bid, 5);
            askPriceId.innerHTML = formatAndWrapLastTwoDigits(ask, 5);
        } else if (lengthOfDecimal == 2) {
            bidPriceId.innerHTML = formatAndWrapLastTwoDigits(bid, 3);
            askPriceId.innerHTML = formatAndWrapLastTwoDigits(ask, 3);
        } else {
            bidPriceId.innerHTML = defaultWrap(bid);
            askPriceId.innerHTML = defaultWrap(ask);
        }
    }

    function getPopPrice(asset, ask, bid, as, bs) {
        const bidPriceId = document.getElementById("pop_" + asset + 'BID');
        const askPriceId = document.getElementById("pop_" + asset + 'ASK');
        const spreadId = document.getElementById("pop_" + asset + 'S');
        const numToString = bid.toString();
        const decimalPart = numToString.split('.')[1];
        const lengthOfDecimal = decimalPart ? decimalPart.length : 0;
        if (lengthOfDecimal <= 5) {
            spreadId.innerHTML = ((ask - bid) * 10000).toFixed(2);
        } else {
            spreadId.innerHTML = ((ask - bid) * 10000).toFixed(2);
        }
        if (lengthOfDecimal < 4) {
            spreadId.innerHTML = ((ask - bid)).toFixed(2);
        }
        if (lengthOfDecimal == 4) {
            bidPriceId.innerHTML = formatAndWrapLastTwoDigits(bid, 5);
            askPriceId.innerHTML = formatAndWrapLastTwoDigits(ask, 5);
        } else if (lengthOfDecimal == 2) {
            bidPriceId.innerHTML = formatAndWrapLastTwoDigits(bid, 3);
            askPriceId.innerHTML = formatAndWrapLastTwoDigits(ask, 3);
        } else {
            bidPriceId.innerHTML = defaultWrap(bid);
            askPriceId.innerHTML = defaultWrap(ask);
        }
    }

    function formatAndWrapLastTwoDigits(num, toFix) {
        let formattedNumber = num.toFixed(toFix);
        let integerPart = formattedNumber.slice(0, -2);
        let lastTwoDigits = formattedNumber.slice(-2);
        return `${integerPart}<label>${lastTwoDigits}</label>`;
    }

    function defaultWrap(num) {
        let formattedNumber = num.toString();
        let integerPart = formattedNumber.slice(0, -2);
        let lastTwoDigits = formattedNumber.slice(-2);
        return `${integerPart}<label>${lastTwoDigits}</label>`;
    }

    if ("WebSocket" in window) {
        var ws = new ReconnectingWebSocket("wss://pricefeed.afterprime.com/price?symbol=all");
        ws.timeoutInterval = 200;
        ws.onopen = function () {
            ws.send("Connect");
        };
        ws.onmessage = function (evt) {

            setTimeout(() => {
                fakeTable.style.display = 'none';
                firstTable.classList.add('visible');
            }, 1000);


            var received_msg = evt.data;
            const res = JSON.parse(received_msg);
            const filteredInstruments = res.filter(item => item.id.includes('@Local_Execution'));
            for (const obj of filteredInstruments) {
                obj.id = obj.id.replace('@Local_Execution', '');
                if (idsPopular.includes(obj.id)) {
                    getPopPrice(obj.id, obj.ap, obj.bp, obj.as, obj.bs);
                }
                if (idsForex.includes(obj.id)) {
                    getPrice(obj.id, obj.ap, obj.bp, obj.as, obj.bs);
                }
                if (idsCrypto.includes(obj.id)) {
                    getPrice(obj.id, obj.ap, obj.bp, obj.as, obj.bs);
                }
                if (idsCommo.includes(obj.id)) {
                    getPrice(obj.id, obj.ap, obj.bp, obj.as, obj.bs);
                }
                if (idsIndices.includes(obj.id)) {
                    getPrice(obj.id, obj.ap, obj.bp, obj.as, obj.bs);
                }
                if (idsStocks.includes(obj.id)) {
                    getPrice(obj.id, obj.ap, obj.bp, obj.as, obj.bs);
                }
                if (idsBonds.includes(obj.id)) {
                    getPrice(obj.id, obj.ap, obj.bp, obj.as, obj.bs);
                }
            }
        };
        ws.onclose = function () {
        };
    } else {
        item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
    }
}