// post data

var post_data = function() {
    var msg = $( "#{{ name }}-input" ).val();
    $.post( "{{ post_url }}", {"msg": msg}, function(){});
    $( "#{{ name }}-input" ).val("");
}

// post data on button click
$( "#{{ name }}-send" ).click(post_data);

// post data on enter press
$( "#{{ name }}-input" ).keydown(function(e) {
    if(e.which === 13 && !e.shiftKey) {
        event.preventDefault();
        post_data();
    }
})

function prettyDate(time) {
  var date = new Date(time);
  return date.toLocaleTimeString(navigator.language, {
    hour: '2-digit',
    minute:'2-digit'
  });
}

var update_display = function(data) {
    var msg_display = $( "#{{ name }}-display" );

    data.forEach(function(msg) {

        var msg_time = prettyDate(msg.timestamp*1000);

        if (msg.nickname == "{{ own_nickname }}") {
            var s = "margin-left: auto;"
            var you = "{{ you_label }}";
        } else {
            var s = "";
            var you = "";
        }

        var nick = msg.nickname + you;

        // manage colors
        if ("{{ color_target }}" == "nickname") {
            var nick_color = `color: ${msg.color};`;
            var border_color = "";
        } else if ("{{ color_target }}" == "border") {
            var nick_color = "";
            var border_color = `border-color: ${msg.color};`;
        } else if ("{{ color_target }}" == "none") {
            var nick_color = "";
            var border_color = "";
        }

        var html = `<div class='msg p-2 mt-2 card shadow-sm' style='width: {{ msg_width }}; ${s}; position: relative; ${border_color}' id='${msg.timestamp}'>

        <span style='${nick_color}; font-size: 65%'>${nick}</span>

        <div style='font-size: 85%;'>
        ${msg.msg}
        </div>

        <span style='font-size:  60% ; position: absolute; bottom: 0; right: 0;' class='text-muted p-1'>${msg_time}</span>
        </div>`;

        msg_display.append(html);

    });
};

var refresh = function() {
    $.get( "{{ load_url }}", function(){});
    $.get( "{{ get_new_url }}", update_display);
}

var refresh_repeatedly = function() {
    // load data periodically and refresh element
    refresh();
    setTimeout(refresh_repeatedly, {{ interval }}*1000)
};

$(document).ready(function() {
    $.get( "{{ load_url }}");
    $.get( "{{ get_all_url }}", update_display);
    refresh_repeatedly();
})
