{% extends "base.html" %}

{% block content %}
<div class="centered">
    <div class="checkbox">
        <label> <input type="checkbox" id="random" class="set-tooltip"
                       title="Checking this box will match you with anyone - including those that don't match what you are looking for.
                       You and the other party must have this box checked for it to create a match."
                       {% if session.random %}checked="checked"{% endif %}
                        >
            Match random users</label>
    </div>
    <div id="container">
        <button title="You may or may not be matched with the same person again" type="button" id="newMatch" class="set-tooltip btn btn-primary">Find new match</button>
        <button title="This will prevent the person at the current session from talking to you and match you with a new person" id="banAndNewMatch" type="button" class="set-tooltip btn btn-danger">Ignore and find new match</button>
        <br>
        <br>
        <textarea disabled="disabled" autocomplete="off" cols="100" rows="25" id="chat"></textarea>
        <br>
        <input autocomplete="off" style="width: 725px;" placeholder="Your message here..." type="text" id="input"><br>

    </div>
</div>

<script type="text/javascript">
    $(function () {

        $("#newMatch").click(function () {
            location.reload();
        });

        $("#banAndNewMatch").click(function () {
            $.get("./main/ignoresession/", function () {
                location.reload();
            });
        });

        $(".set-tooltip").tooltip();

        $("#random").change(function (e) {
            console.log(e);
            $.post("./main/togglerandom", {random: $(this).is(":checked")});
        });

        var searching = true;
        function appendChat(text) {
            var chatVal = $("#chat").val();
            chatVal += text + "\n";
            $("#chat").val(chatVal);
        }

        function poll() {
            setTimeout(function() {
                // hit the read endpoint
                // the read endpoint will return false if matching is in progress
                // otherwise will return an array
                $.ajax({
                    url: "./main/read/", success: function (data) {
                        if (data === false) {
                            $("#container").waitMe({
                                effect: "ios",
                                text: "Finding match. Please wait...",
                                bg: 'rgba(255,255,255,0.7)',
                                color: '#000',
                                maxSize: ''
                            });
                            searching = true;
                        } else {
                            $("#container").waitMe("hide");
                            if (searching) {
                                appendChat("Friendly Replicator Android (Fran): Match found!");
                                searching = !searching;
                            }
                            if (data) {
                                $.each(data, function (index, value) {
                                    appendChat(value);
                                });
                            }
                        }
                    }, dataType: "json", complete: poll
                });
            }, 2000);
        }

        $('#input').keydown(function (e){
            if(e.keyCode == 13){
                var val = $("#input").val();
                $("#input").val("");
                appendChat("You: " + val);
                $.post("./main/send/", {message : val});
            }
        });

        $("#container").waitMe({
           effect: "ios",
            text: "Finding match. Please wait...",
            bg: 'rgba(255,255,255,0.7)',
            color: '#000',
            maxSize: ''
        });


        poll();



    });
</script>

{% endblock %}