{{ block title }}
Trade
{{ endblock }}
{{ block content }}

<p id="news" style="color: green"></p>

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<table class="table">
    <tr>
        <td>Assets</td>
        <th id="num_items"></th>
    </tr>
    <tr>
        <td>Dividends</td>
        <th id="current_offer"></th>
    </tr>
    <tr>
        <td>Total ECU</td>
        <th id="payoff"></th>
    </tr>
</table>

<br><br>

<input type="number" id="my_sell">
<button type="button" onclick="sendSellOffer()" id="btn-sell">Sell</button>
<input type="number" id="my_buy">
<button type="button" onclick="sendBuyOffer()" id="btn-buy">Buy</button>
<br><br>
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h4>Bids</h4>
            <table id="bids_table"></table>
        </div>
        <div class="col-sm">
            <h4>Asks</h4>
            <table id="asks_table"></table>
        </div>
    </div>
</div>

<br><br>
{{ include 'double_auction/chart.html' }}

<br><br>

{{ chat }}

<script>

    let bids_table = document.getElementById('bids_table');
    let asks_table = document.getElementById('asks_table');
    let my_id = js_vars.id_in_group;
    let news_div = document.getElementById('news');
    let is_buyer = js_vars.is_buyer;
    let btn-buy = document.getElementById('btn-buy');
    let my_buy = document.getElementById('my_buy');
    let btn-sell = document.getElementById('btn-sell');
    let my_sell = document.getElementById('my_sell');

    function showNews(msg) {
        news_div.innerText = msg;
        setTimeout(function () {
            news_div.innerText = ''
        }, 10000)
    }

    function cu(amount) {
        return `${amount} points`;
    }

    function liveRecv(data) {
        console.log(data)
        // javascript destructuring assignment
        let {bids, asks, highcharts_series, num_items, current_offer, payoff, news} = data;
        if (news) {
            let {buyer, seller, price} = news;
            if (buyer === my_id) {
                showNews(`You bought from player ${seller} for ${cu(price)}`);
            } else if (seller === my_id) {
                showNews(`You sold to player ${buyer} for ${cu(price)}`);
            }
        }
        document.getElementById('num_items').innerText = num_items;
        document.getElementById('current_offer').innerText = cu(current_offer);
        document.getElementById('payoff').innerText = cu(payoff);
        if (!is_buyer && num_items === 0) {
            btnOffer.disabled = true;
        }
        bids_table.innerHTML = bids.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        asks_table.innerHTML = asks.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        redrawChart(highcharts_series);
    }

    function sendBuyOffer() {
        liveSend({'buy_offer': my_buy.value})
    }

    function sendSellOffer() {
        liveSend({'sell_offer': my_sell.value})
    }

    my_buy.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendBuyOffer();
        }
    });

    my_sell.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendSellOffer();
        }
    });

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });
</script>

{{ endblock }}