{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .important { color: #336699; }
    </style>
{% endblock %}
{% block content %}
    <div class="">
            <div>
                <h2>Emotion Analysis Results</h2>
            </div>
            <p>
               Recording still processing. Refresh page in 5min to see results.
            </p>


        </div>
    <div id="graph" style="width:1200px;height:400px; margin: 0 auto"></div>
    <script>
        emotions_json = {{ emotions_json | safe }};
        topics_json = {{ topics_json | safe }};
        if(emotions_json) {
            emotions_json = emotions_json.segments[0];
            var jP = $('p');
            jP.html(`Dominant emotion: ${emotions_json.emotion_summary.emotion_class}`)

            function secondsToHms(d) {
                d = Number(d);
                var h = Math.floor(d / 3600);
                var m = Math.floor(d % 3600 / 60);
                var s = Math.floor(d % 3600 % 60);

                var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
                var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
                var sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
                return hDisplay + mDisplay + sDisplay;
            }

            emotions = emotions_json.emotions;
            x = []
            y = []
            y_green = []
            y_red = []
            running_mean = [];
            WINDOW_LEN = 30;
            texts = []

            annotations = []
            colors = []
            var last_topic = '';
            for(let idx = 0; idx < emotions.length; idx++) {
                let sent = 0;
                let emotion = emotions[idx];
                if(emotion.emotion_class != 'neutral') {
                    if (emotion.emotion_class == 'happiness')
                    {
                        running_mean.push(emotion.probability);
                    }
                    else
                    {
                        running_mean.push(-emotion.probability);
                    }
                }
                else {
                    running_mean.push(0);
                }
                if(running_mean.length > WINDOW_LEN) {
                    x.push(secondsToHms(idx))
                    let value = _.mean(running_mean);
                    y.push(value)
                    if(value > 0) {
                        y_green.push(value);
                        y_red.push(0);
                        colors.push('green');

                    }
                    else {
                        y_red.push(value);
                        y_green.push(0);
                        colors.push('red');
                    }
                    running_mean = _.takeRight(running_mean, WINDOW_LEN);

                    var current_topic = '';
                    for(var topic of topics_json)
                    {
                        if(idx > topic.time_cur)
                        {
                            current_topic = topic.sentence;
                        }
                        else {
                            break;
                        }
                    }
                    if(current_topic != '') {
                        if(current_topic != last_topic) {
                            last_topic = current_topic;
                        }
                    }

                    texts.push(last_topic);

                }
            }

            data_series = [
                {
                    x: x,
                    y: y,
                    type: 'bar',
                    text: texts,
                    marker: {
                      color: colors
                    },
                }

            ];



            //hover_data
            Plotly.newPlot( document.getElementById('graph'), data_series,
            {
                title: 'Emotions in conversation',
                showlegend: false
            } );

            //color='lifeExp',
        }


    </script>

    </div>
{% endblock %}