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

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

<table class="table">
    <p style="color: red"> Reminder: The price of the product is related to the quality. The higher the price, the higher the quality.</p>
    <tr>
        <td>Your role</td>
        <th>
            {{ if player.is_buyer }}buyer{{ else }}seller{{ endif }}
        </th>
    </tr>
    <tr>
        <td>Last Item Earning</td>
        <th id="item_earning">{{player.earning_last_item}}</th>
    </tr>  
    <tr>
        <td>Current Round</td>
        <th id="round">{{player.current_round}}</th>
    </tr>  
    <tr>
        <td>Current Stage</td>
        <th id="stage">{{player.current_stage}}</th>
    </tr>
    <tr>
        <td>Left Chances</td>
        <th id="chance">{{player.left_chance}}</th>
    </tr>
    <tr>
        <td>
            {{if player.is_buyer}}
            <th></th>
            {{else}}
                Product's Quality: <th id="product_quality">{{player.current_quality}}</th>
            {{endif}}
        </td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td>Product value</td>
        <th id="product_value">{{player.current_offer}}</th>
    </tr>
    <tr>
        <td>Current price</td>
        <th id="current_price">{{player.current_offer}}</th>
    </tr>
</table>
<img src="{{ static image_path }}" width="500px" id="item_img" />
<br><br>
{{if player.is_buyer}}
<br><br>
<tr>
Guessing item's quality(between 0.0 and 1.0): <input type="number" id="guess_quality">
</tr>
{{else}}
<br><br>
{{endif}}
<br><br>
<button type="button" onclick="accpetOffer()" id="btn-accept">Accept</button>
<br><br>
{{if player.is_buyer}}
<br><br>
{{else}}
<button type="button" onclick="rejectOffer()" id="btn-reject">Reject</button>
<br><br>
{{endif}}
<input type="number" id="my_offer">
<button type="button" onclick="sendOffer()" id="btn-offer">Counter</button>
<br><br>
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h4>bargain history</h4>
            <table id="bargain_history_table"></table>
        </div>
    </div>
</div>


<script>

    let bargain_history_table = document.getElementById('bargain_history_table');
    let my_id = js_vars.id_in_group;
    let news_div = document.getElementById('news');
    let round_div = document.getElementById('round');
    let stage_div = document.getElementById('stage');
    let chance_div = document.getElementById('chance');
    let is_buyer = js_vars.is_buyer;
    let btnOffer = document.getElementById('btn-offer');
    let btnAccept = document.getElementById('btn-accept');
    let btnReject = document.getElementById('btn-reject');
    let item_img = document.getElementById('item_img');
    let item_price = document.getElementById('product_value');
    let item_quality = document.getElementById('product_quality');
    let item_description = document.getElementById('item_description');
    let item_offer = document.getElementById('current_price');
    let item_earning = document.getElementById('item_earning');
    let finishing = false;
    let t = null;
    if(is_buyer == false)
    {
        btnOffer.disabled=true;
        btnAccept.disabled=true;
        btnReject.disabled=true;
    }
    function showNews(msg) {
        news_div.innerText = msg;
        //setTimeout(function () {
        //    news_div.innerText = ''
        //}, 30000)
    }

    function update_round_info(round_info){
        let {round, stage, chance} = round_info;
        if(parseInt(round) > 2){
            document.getElementById("form").submit();
        }

        round_div.innerHTML = round;
        stage_div.innerHTML = stage;
        chance_div.innerHTML = chance;
        if(is_buyer){
            if(parseInt(chance)==0){
                btnOffer.disabled=true;
            }
        }
        else{
            if(parseInt(chance)==1){
                btnOffer.disabled=true;
            }            
        }
        let round_start_stage = [0, 5, 14, 19, 28]
        item_img.src = "/static/" + (round_start_stage[parseInt(round)] +parseInt(stage) +1) + "_1.jpg"; 
    }

    function update_display(display, price){
        let {value, condition, description, earning} = display;
        if(item_price != null)
            item_price.innerText = value;
        if(item_quality!=null)
            item_quality.innerText = condition*value;
        if(item_description!=null)
            item_description.innerText = description;
        if(item_offer!=null)
            item_offer.innerText = price;
        if(item_earning!=null)
            item_earning.innerText = earning;
    };

    function cu(amount) {
        return `${amount}`;
    }
    /*
    if(t == null && btnAccept.disabled!=true)
                    {
                        t = setTimeout(
                        function () {
                            alert("Time has run out. Accept the offer.");
                            btnAccept.onclick();
                        },
                        60*1000 // 60 seconds
                    );
                    }
    */
    function liveRecv(data) {
        console.log(data);
        // javascript destructuring assignment
        let {finished, round_info, display, history, current_price, news} = data;
        if(is_buyer){
            if(finished!=finishing)
            {

                if(finished==false)
                {
                    /*
                    if(t == null && btnAccept.disabled!=true)
                    {
                        t = setTimeout(
                        function () {
                            alert("Time has run out. Accept the offer.");
                            btnAccept.onclick();
                        },
                        60*1000 // 60 seconds
                    );
                    }
                    */
                    showNews("starting new bargain.");
                    btnAccept.disabled = false;
                    if(btnReject != null)
                        btnReject.disabled = false;
                    btnOffer.disabled = false;
                }
                finishing = finished;
            }
        }
        if (news) {
            let {buyer, seller, price, from_buyer, is_reject, is_accept} = news;
            if(buyer === my_id || seller === my_id){
                update_display(display, price);
            }
            
            if(buyer === my_id && from_buyer && (is_reject || is_accept))
            {
                if(is_buyer){
                        if(finishing==false)
                        {
                            /*
                            if(t == null && btnAccept.disabled!=true)
                            {
                                t = setTimeout(
                                function () {
                                    alert("Time has run out. Accept the offer.");
                                    btnAccept.onclick();
                                },
                                60*1000 // 60 seconds
                            );
                            }
                            */
                            btnAccept.disabled = false;
                            if(btnReject != null)
                                btnReject.disabled = false;
                            btnOffer.disabled = false;
                        }
                    }        
            }
            
            //if(seller === my_id && !from_buyer)
            //{
            //    if(!is_buyer){
            //            if(finishing==false)
            //            {
            //                btnAccept.disabled = false;
            //                if(btnReject != null)
            //                    btnReject.disabled = false;
            //                btnOffer.disabled = false;
            //            }
            //        }        
            //}
            if (buyer === my_id && !from_buyer) {
                if(is_reject){
                    showNews(`You counter offer is rejected by ${seller}, waiting for next bargain...`);
                    if(is_buyer){
                        if(finishing==false)
                        {
                            btnAccept.disabled = false;
                            if(btnReject != null)
                                btnReject.disabled = false;
                            btnOffer.disabled = false;
                        }
                    }
                }
                else if(is_accept){
                    showNews(`You counter offer is accepted by ${seller}, waiting for next bargain...`);
                    if(is_buyer){
                        if(finishing==false)
                        {
                            btnAccept.disabled = false;
                            if(btnReject != null)
                                btnReject.disabled = false;
                            btnOffer.disabled = false;
                        }
                    }
                }
                else{
                    /*
                    if(t == null)
                    {
                        t = setTimeout(
                        function () {
                            alert("Time has run out. Accept the offer.");
                            btnAccept.onclick();
                        },
                        60*1000 // 60 seconds
                    );
                    }
                    */
                    showNews(`You have a counter offer:${price} from ${seller}`);
                    document.getElementById('current_price').innerText = cu(price);  
                    btnOffer.disabled = false;
                    //btnReject.disabled = false;
                    btnAccept.disabled = false;
                }
            }
            else if(seller === my_id && from_buyer){
                if(is_reject){
                    showNews(`You offer is rejected by ${buyer}, waiting for next bargain...`);
                    if(is_buyer){
                        if(finishing==false)
                        {
                            
                            btnAccept.disabled = false;
                            if(btnReject != null)
                                btnReject.disabled = false;
                            btnOffer.disabled = false;
                        }
                    }
                }
                else if(is_accept){
                    showNews(`You offer is accepted by ${buyer}, waiting for next bargain...`);
                    if(is_buyer){
                        if(finishing==false)
                        {
                            btnAccept.disabled = false;
                            if(btnReject != null)
                                btnReject.disabled = false;
                            btnOffer.disabled = false;
                        }
                    }
                }
                else{
                    /*
                    if(t == null)
                    {
                        t = setTimeout(
                        function () {
                            alert("Time has run out. Accept the offer.");
                            btnAccept.onclick();
                        },
                        60*1000 // 60 seconds
                    );
                    }
                    */
                    showNews(`You have a counter offer:${price}`);
                    document.getElementById('current_price').innerText = cu(price);
                    btnOffer.disabled = false;
                    btnReject.disabled = false;
                    btnAccept.disabled = false;
                }
            }    
        }   
        //if (!is_buyer && num_items === 0) {
        //    btnOffer.disabled = true;
        //}
        update_round_info(round_info)
        bargain_history_table.innerHTML = history.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 sendOffer() {
        if(t!=null)
        {
            clearTimeout(t);
            t = null;
        }
        console.log("sendoffer");
        if(is_buyer){
            liveSend({'offer': document.getElementById('my_offer').value, 'guess_quality':document.getElementById('guess_quality').value})
        }
        else{
            liveSend({'offer': document.getElementById('my_offer').value})
        }
        showNews(`You send a counter offer ${document.getElementById('my_offer').value}`);
        document.getElementById('current_price').innerText = cu(document.getElementById('my_offer').value);
        btnAccept.disabled = true;
        if(btnReject != null)
            btnReject.disabled = true;
        btnOffer.disabled = true;
    }

    function accpetOffer(){
        if(t!=null)
        {
            clearTimeout(t);
            t = null;
        }
        if(is_buyer){
            liveSend({'offer': -10000, "guess_quality":document.getElementById('guess_quality').value});
        }
        else{
            liveSend({'offer': -10000});
        }
        showNews(`You accept a offer`);
        btnAccept.disabled = true;
        if(btnReject != null)
            btnReject.disabled = true;
        btnOffer.disabled = true;
    }

    function rejectOffer(){
        if(t!=null)
        {
            clearTimeout(t);
            t = null;
        }
        if(is_buyer){
            liveSend({'offer': -20000, "guess_quality":document.getElementById('guess_quality').value});
        }
        else{
            liveSend({'offer': -20000});
        }
        showNews(`You reject a offer`);
        btnAccept.disabled = true;
        if(btnReject != null)
            btnReject.disabled = true;
        btnOffer.disabled = true;
    }

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

{{ endblock }}