{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% load staticfiles %}

{% block content %}
    <!-- front_end_controller defines the whole user interface -->
    <div class="front_end_controller">
        
        <!-- info-table is the top information diplay -->
        <div class="top-banner">
        <info-table></info-table>
        </div>
        <!-- new row defining the interactive part of the front end -->
        <div class="row">
            
            <!-- left most graph displaying users changing profit -->
            <profit-graph></profit-graph>
            
            <!-- middle graph displaying and able to be clicked to show spread  -->
            <spread-graph></spread-graph>
            
            <!-- right most section comprised of the strategy buttons -->
            <input-section></input-section>
        
        </div>
    </div>
    <div class="overlay"></div>
<script>
    //Stores all the constants defined in Constansts in models.py and pulled from a presumed manifest file of some sort
    let otree = {};

    (function(){
        var origin = window.location.origin;
        var Static_Files = {
           //polymer: "/static/hft/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
            input_section: "/static/hft/input-section/input-section.js",
            spread_graph: "/static/hft/spread-graph/spread-graph.js",
            profitGraph: "/static/hft/profit-graph/profit-graph.js",
            info_table: "/static/hft/info-table/info-table.js"
        };

        var static_file;
        for(var key in Static_Files){
            temp = Static_Files[key];
            var static_file = origin + temp;
            $.ajax({
                type: 'GET',
                url:static_file,
                success: function(data){
                    console.log(static_file + " has been loaded");
                    // $(data).find("a:contains('.js')").each(function(){
                    //     // will loop through
                    //     console.log("second data");
                    //     console.log(this);
                    //     listed_files.push(this);
                    // });
       
                }
            }); 
        }

        otree.fileReady = true;
        
    }());
</script>
{% endblock %}

{% block styles%}
<link rel="stylesheet" type = "text/css" href="{% static 'hft/index/index.css' %}"/>
{% endblock %}

{% block scripts %}
    <script src="https://d3js.org/d3.v5.js"></script>
    <script src="https://momentjs.com/downloads/moment.js"></script>
    <script src="https://momentjs.com/downloads/moment-timezone.min.js"></script>
    <link rel="manifest" href="{% static 'hft/manifest.json' %}">
    <script src="{% static 'hft/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js' %}"></script>
    <script type="module" src="{% static 'hft/input-section/input-section.js' %}"></script>
    <script type="module" src="{% static 'hft/spread-graph/spread-graph.js' %}"></script>
    <script type="module" src="{% static 'hft/profit-graph/profit-graph.js' %}"></script>
    <script type="module" src="{% static 'hft/info-table/info-table.js' %}"></script>
    
<script>
//All socket actions are stored in this object to be used in the seperated js files
let socketActions = {};

let spreadGraph = {};

let profitGraph = {};

let inputSection = {};

(function(){

/*  
IMPORTANT:
Constant, Player, and Group Information from oTree stored in the otree objects
*/
    otree.groupIDInfoTable = {{group.id_in_subsession}};
    otree.groupID = {{group.id}};
    otree.playerID = {{player.id}};
    otree.playerIDInGroup = {{player.id_in_group}}; 
    otree.maxSpread = {{player.max_spread}}; 
    otree.defaultSpread = {{player.spread}};
    otree.startingWealth = {{player.endowment}};
    otree.startFP = {{player.fp}}; 
    otree.smallestSpread = {"key":-1, "spread":otree.maxSpread};
    otree.min_spread = 3000;
    otree.roundLength = {{subsession.round_length}};
    otree.timeOffset = 0; 
    otree.speedLongDelay = {{Constants.long_delay}} * (1e3);
    otree.speedShortDelay = {{Constants.short_delay}} * (1e3);
    otree.speedCost = {{player.speed_unit_cost}};
    otree.endMsg = "off";
    otree.batchLength = {{subsession.batch_length}}; // Set to zero if there is a FBA experiment, sends error otherewise
    otree.design ="{{subsession.design}}"; //Design Variable to be pulled from the backend
    otree.CDA = false; //Continuous Double Auction
    otree.FBA = false; //Frequent Batch Auction
    otree.IEX = false; //Continuous Double Auction
    otree.FBAGraph = false;  //Turns to true when first batch comes in for FBA and the profit graph begins 
    otree.sync = false;      //When player syncs at beginning  of expirement this is turned to true
    otree.batch = 0;
    otree.offset = 0;  
    spreadGraph.queue = {}; 

    if(otree.design == "CDA"){
        otree.CDA  = true; 
    } else if(otree.design == "FBA"){
        otree.FBA = true;
    } else if(otree.design == "IEX"){
        otree.IEX = true;
    }
    
/*
IMPORTANT:
Graph_Features is an object that stores the features of the profit and spread graph that are only able to be retrieved in index.html. This object is used in spread-graph.js and profit-graph.js
*/

    //SPREAD GRAPH
    spreadGraph.spread_width = document.querySelector("spread-graph").clientWidth;
    spreadGraph.spread_height = document.querySelector("spread-graph").clientHeight;
    spreadGraph.spread_x = document.querySelector("spread-graph").getBoundingClientRect().left;
    spreadGraph.spread_y = document.querySelector("spread-graph").getBoundingClientRect().top;
    spreadGraph.spread_lines = {};
    spreadGraph.spreadLinesFBAConcurrent = {}; //Holds a running map of the spread lines
    spreadGraph.spreadLinesFBABatch = {};      //Holds all the lines from the last batch to figure out smallest spread
    spreadGraph.last_spread =  otree.defaultSpread/10000;

    //PROFIT GRAPH
    profitGraph.profit_width = document.querySelector("profit-graph").clientWidth;
    profitGraph.profit_height = document.querySelector("profit-graph").clientHeight;

/*
In order for our Shadow DOM Elements to be acessable in javascript we must set the mode to 'open', 'closed' is the other option and would restrict access to the Shadow DOM Elements. Since they are now open we can access them with js in their corressponding .js files
*/
    document.querySelector("spread-graph").attachShadow({mode: 'open'});
    document.querySelector("profit-graph").attachShadow({mode: 'open'});
    document.querySelector("input-section").attachShadow({mode: 'open'});

/*
Socket Actions
*/
    //Socket Connection
    var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
    var socket = new WebSocket(ws_scheme + '://' + window.location.host + "/hft/{{group.id}}/{{player.id}}/");
   
    socketActions.socket = socket;

    //     // Handle any errors that occur.
    socketActions.socket.onerror = function (error) {
        console.log('WebSocket Error: ' + error);
    };

    // Show a connected message when the WebSocket is opened.
    socketActions.socket.onopen = function (event) {
        console.log('Client has connected to django channels');
        // Also Check if all files exist on the server
    };

    /*
    * Handle messages sent by the server.
    */
     socketActions.socket.onmessage = function (event) {
        
        var fund_price = document.querySelector('info-table').fp;
        var obj = jQuery.parseJSON(event.data);
        var spread = document.querySelector("info-table").spread_value;
       
        /*
        * FPC message: NASDAQ pricing changes
        * Update FP on info-table
        * Update bid and ansk on info-table
        * Draw FPC based on the difference of the current FPC and the new FPC
        */
        if(obj.FPC != undefined){
            var FPCDollarAmount = (obj.FPC*(1e-4)).toFixed(2);
            document.querySelector('info-table').fp = FPCDollarAmount;
            var difference = Math.abs(fund_price - (obj.FPC/10000));     
            spreadGraph.updateBidAndAsk(FPCDollarAmount,spread);

            if((obj.FPC/10000) > fund_price){
                difference = difference*-1;
            }
            difference = difference*10000;
            spreadGraph.drawFPC((difference == NaN) ? 0 : difference);
            
            
            for(var key in spreadGraph.spread_lines){
                for(var token in spreadGraph.spread_lines[key]){
                    spreadGraph.spread_lines[key][token] -= parseInt(difference);
                    spreadGraph.spread_lines[key][token] -= parseInt(difference);
                }
            }
        /*
        * Draw Execution on the spread-graph
        * Draw Execution on the profit-graph
        */
        }else if(obj.EXEC != undefined){
            var timeNow = profitGraph.getTime() - otree.timeOffset;
            var exec = {};
            exec["player"] = obj.EXEC.id;
            exec["side"] = obj.EXEC.token[4];
            exec["profit"] = obj.EXEC.profit;
            
            spreadGraph.executionHandler(exec);
            
            if(obj.EXEC.id == otree.playerIDInGroup){   
                
                profitGraph.profitJumps.push(
                    {
                        timestamp:timeNow,
                        oldProfit:profitGraph.profit,
                        newProfit:profitGraph.profit + obj.EXEC.profit, 
                    }
                );

                profitGraph.profit += obj.EXEC.profit;
                profitGraph.profitSegments.push(
                    {
                        startTime:timeNow,
                        endTime:timeNow, 
                        startProfit:profitGraph.profit, 
                        endProfit:profitGraph.profit,
                        state:document.querySelector('info-table').player_role
                    }
                )   
            } 
        /*
        * Update spread_lines for CDA, spreadLinesFBAConcurrent for FBA
        * Remove maker spread if they left the market
        * Find smallest spread, if player is then spread bar blue green otherwise
        * Draw maker lines on the spread-graph as they come in for CDA not if FBA draw on batch processed obj.BATCH == "P"
        */
        }else if(obj.SPRCHG != undefined) {
            // Number.MAX_SAFE_INTEGER
            var player_id = parseInt(otree.playerIDInGroup);
            var smallest_spread = [-1,Infinity];
            updateSpreadQueue(obj.SPRCHG);
            for(var key in obj.SPRCHG){
                var incomingSpread;
                var incomingSpread = (obj.SPRCHG[key]["A"] - obj.SPRCHG[key]["B"])/10000;
                if(key == player_id && obj.SPRCHG[key] != 0 ){
                    spreadGraph.last_spread = incomingSpread;
                }
                delete spreadGraph.spread_lines[key];
               
                if(obj.SPRCHG[key] == 0){
                    // Maker has left the market so remove that maker tick
                    spreadGraph.spread_svg.selectAll(".others_line_top_" + key).remove();
                    spreadGraph.spread_svg.selectAll(".others_line_bottom_" + key).remove();
                    delete obj.SPRCHG[key];
                } 
                // process all new spreads  after the zeros have been removed
                if(incomingSpread < 0){
                    console.error("Invalid spread calculation from a SPRCHG msg", obj.SPRCHG);
                }

                if(incomingSpread < smallest_spread[1]){
                    smallest_spread[0] = parseInt(key);
                    smallest_spread[1] = incomingSpread;
                }
            }
            var lineParser = spreadGraph.spread_lines;

            for(var key in lineParser){
                // process all new spreads  after the zeros have been removed
                var spread = (lineParser[key]["A"] - lineParser[key]["B"])/10000;
                if(spread < smallest_spread[1]){
                    smallest_spread[0] = parseInt(key);
                    smallest_spread[1] = spread;
                }
            }
            if(smallest_spread[0] == player_id){
                spreadGraph.smallest_spread = true;
            }else{
                spreadGraph.smallest_spread = false;
            }

            spreadGraph.drawSpreadChange(obj.SPRCHG);
            spreadGraph.drawQueue();

        
        /*
        * Recieved on sync message sent from the backend, sent from backend when they recieved all player_ready
        * Start experiment (remove grey overlay)
        */
        }else if(obj.SYNC != undefined){
            console.log("Recieved SYNC");
            otree.sync = true; 
            startExperiment();
        
        /*
        * Recieved when number of trader enters or leaves the market, update the info-table accordingly
        */
        } else if(obj.TOTAL != undefined){

            // Player State Change message from the backend
            var total_makers = obj.TOTAL.MAKER;
            var total_snipers = obj.TOTAL.SNIPER;
            var total_out = obj.TOTAL.OUT;
            var total_traders = total_makers + total_snipers;
            document.querySelector("info-table").num_traders = total_traders;
            document.querySelector("info-table").num_makers = total_makers;
        
        }  
    };

    // Show a disconnected message when the WebSocket is closed.
    socketActions.socket.onclose = function (event) {
        console.log('disconnected from oTree');
    };

    /*
    * If CDA start the profit-graph
    * Initialize the info-table
    * Set experiment timer on experiment based on the round length set by the configs
    */
    function startExperiment(){
        
            profitGraph.adminStartTime = profitGraph.getTime();
            profitGraph.profitSegments = [
                {
                    startTime:profitGraph.adminStartTime,
                    endTime:profitGraph.adminStartTime, 
                    startProfit:profitGraph.profit, 
                    endProfit:profitGraph.profit,
                    state:"OUT"
                }
            ];
            profitGraph.init(otree.startFP, profitGraph.startingWealth, "secondTick");
            requestAnimationFrame(profitGraph.draw);
            
            
            /** Initializing all info table values **/
            document.querySelector('info-table').setAttribute("player_id","{{player.id_in_group}}");
            document.querySelector('info-table').setAttribute("period_id",{{group.round_number}} - 1); 
            document.querySelector('info-table').setAttribute("speed_cost","0"); 
            document.querySelector('info-table').setAttribute("num_traders","0"); 
            document.querySelector('info-table').setAttribute("player_role","OUT"); 
            document.querySelector('info-table').setAttribute("spread_value","N/A");     
            document.querySelector('info-table').setAttribute("num_makers","0"); 
            document.querySelector('info-table').setAttribute("num_snipers","0"); 
            document.querySelector('info-table').setAttribute("profit",otree.startingWealth*(1-4)); 
            document.querySelector('info-table').setAttribute("fp"," "+ {{player.fp}} * (1e-4) + " "); 
            document.querySelector('info-table').setAttribute("curr_bid","N/A"); 
            document.querySelector('info-table').setAttribute("curr_ask","N/A");
            document.querySelector('info-table').setAttribute("group_id",otree.groupIDInfoTable);

            document.querySelector(".overlay").style.opacity = 0;
            document.querySelector(".overlay").style.pointerEvents = 'none';
            
            window.setTimeout(function(){
                profitGraph.clear();
                spreadGraph.clear();
                otree.endMsg = "on";
                var msg = {
                    type: 'advance_me',
                };
                console.log("Advance to results");
                otree.endMsg = msg;    
                if (socketActions.socket.readyState === socketActions.socket.OPEN) {
                    socketActions.socket.send(JSON.stringify(msg));
                }
                document.querySelector(".overlay").style.opacity = 0.95;
                document.querySelector(".overlay").style.pointerEvents = 'all';
                document.querySelector(".overlay").innerHTML = "<h1 style='font-weight:bold; opacity:1.0;'>End Period, calculating results!</h1>";
            }, otree.roundLength * 1000);
    }



    //Send player ready messages to backend between 1-5 seconds after player loads screen (wait for all other players)
    if(otree.fileReady == true){
        window.setTimeout(function(){
                playerReady();  
        },Math.floor(Math.random() * 5000) + 1000); // Given a random number between 1000 & 6000
    }

    function playerReady(){
            otree.playerID = {{player.id}};
            otree.playerIDInGroup = {{player.id_in_group}}; 
            otree.maxSpread = {{player.max_spread}}; 
            otree.defaultSpread = {{player.spread}};
            otree.startingWealth = {{player.endowment}};
            otree.startFP = {{player.fp}}; 
            otree.smallestSpread = {"key":-1, "spread":otree.maxSpread};
            otree.roundLength = {{subsession.round_length}};
            otree.speedCost = {{player.speed_unit_cost}} * (1e-9);

            var msg = {
                 type: 'player_ready',
            };
            console.log("Sending Player Ready");
            if (socketActions.socket.readyState === socketActions.socket.OPEN) {
                socketActions.socket.send(JSON.stringify(msg));
            }
    }

    function updateSpreadQueue(SPRCHG){
        for(var key in SPRCHG){
            var queueSpread = (SPRCHG[key]["A"] - SPRCHG[key]["B"]);
            var index = -1;
            for(var price in spreadGraph.queue){
                index = spreadGraph.queue[price].indexOf(key);
                if(index != -1){
                    spreadGraph.queue[price].splice(index,1); 
                } 
            }
            console.log(queueSpread);
            console.log(key);
            spreadGraph.queue[queueSpread].push(key);
            
        }
    }

}());

</script>


{% endblock %}