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

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

<table class="table">
    <tr>
        <td>Your role</td>
        <th>
            {{ if player.is_buyer }}Buyer{{ else }}Seller{{ endif }}
        </th>
    </tr>
    <tr>
        <td>Your car is a </td>
        <th id="current car">
        </th>
    </tr>
    <tr id="current_offer_row">
        <td>Your current offer</td>
        <th id="current_offer"></th>
    </tr>
    <tr>
        <td>Profits</td>
        <th id="payoff"></th>
    </tr>
    <tr>
        <td>Your Value for a Peach</td>
        <th>
            ${{ if player.is_buyer }}{% Constants.peach %}{{ else }}{% player.sell_peach %}{{ endif }}
        </th>
    </tr>
    <td>Your Value for a Lemon</td>
    <th>${% Constants.lemon %}</th>
    </tr>
    {{ if player.is_buyer }}
    <td>Probability of a Peach</td>
    <th>{% pct_peach %}%</th>
    {{ endif }}
</table>

{{ if player.is_buyer }}{{ else }}
<input type="number" id="my_offer">
<button type="button" onclick="sendOffer()" id="btn-offer">Set Price</button>
<br><br>
{{ endif }}
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h4></h4>
            <table id="bids_table"></table>
        </div>
        <div class="col-sm">
            <h4>Cars for Sale</h4>
            <table id="asks_table"></table>
        </div>
    </div>
</div>

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


<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 btnOffer = document.getElementById('btn-offer');
    let my_offer = document.getElementById('my_offer');
    let current_car = document.getElementById('current car');

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

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

    function liveRecv(data) {
        console.log(data)
        // javascript destructuring assignment
        let {bids, asks, highcharts_series, num_items, nLemon, nPeach, 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;
        if (!is_buyer && (num_items === 1) && current_offer <= 100) {
            document.getElementById('current_offer').innerText = cu(current_offer);
        }
        if (!is_buyer && (num_items === 1)) {
            document.getElementById('current_offer_row').hidden = false;
        } else {
            
            document.getElementById('current_offer_row').hidden = true;
        }

        document.getElementById('payoff').innerText = cu(payoff);
        if (nLemon === 1) {
            current_car.innerHTML = `Lemon  <img src="{% static 'OneLemonMarket/Lemon.png' %}" width="50px"/>`;
        } else if (nPeach === 1) {
            current_car.innerHTML = `Peach  <img src="{% static 'OneLemonMarket/Peach.png' %}" width="50px"/>`;
        } else if (!is_buyer) {
            current_car.innerHTML = `Sold`;
        }
        if (!is_buyer && num_items === 0) {
            btnOffer.disabled = true;
        }
        bids_table.innerHTML = bids.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        offer_table = []
        for (ask of asks) {
            let {offer, seller} = ask;
            console.log(seller)
            offer_table.push(`<tr>
                <td>${cu(offer)} <img src="{% static 'OneLemonMarket/car.png' %}" width="50px"/></td>`);
            if (is_buyer && num_items === 0) {
                offer_table.push(`<th><button type="button" onclick="match(${seller})" id="btn-purchase">Buy</button></th>`);
            }
            offer_table.push(`</tr>`);
        }
        asks_table.innerHTML = offer_table.join('');
            
        redrawChart(highcharts_series);
    }

    function match(seller) {
        liveSend({'type':'Buy','seller':seller})
    }

    function sendOffer() {
        liveSend({'type':'Offer', 'offer': my_offer.value})
    }

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

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

{{ endblock }}