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

{% block styles %}
   <link href="{% static 'words_task/style.css' %}" rel="stylesheet">
    <style>
        .game {

             margin-top:0;
        }
    </style>
{% endblock %}
 

{% block title %}
    You must create as many words as possible in {{test_timeout}} minutes. It's your turn!
{% endblock %}

{% block content %}
    <div class="game">
        <div class="title_desc">Your word list</div>
        <div>
            <div id="word_list" class="word_box"></div>
        </div>
    </div>
    <div class="fixed_box">
        <div id="notexist" class="alert alert-danger" role="alert">The word does not exist!</div>
        <div id="not_new" class="alert alert-warning" role="alert">This word has already been created!</div>
        <div id="not_new_and_wrong" class="alert alert-danger" role="alert">This word does not exist and you have already tried it!</div>

        <div class="new_box">
            <div class="title_desc" style="float: unset;">Create a new word ({{Constants.test_min_nb_letters}} letters min)</div>
            <div></div>
            <ul id="new_word_area" class="words" ></ul>
        </div>
        <div class="hand_box">
            <div class="title_desc">Your hand</div>
            <ul id="hand_area" class="words"></ul>
        </div>
    </div>
    <textarea name="test_words" id="id_test_words"  style="display:none;"></textarea>
{% endblock %}

{% block scripts %}
    <script src="{% static 'words_task/jquery-ui.min.js' %}"></script>
    <script src="{% static 'words_task/script.js' %}"></script>
    <script>
    var hand = {{test_hand|json}};


 

    $( document ).ready(function() {

        var word = [];
        var word_list = [];
        var wrong_word_list = [];

        function update_hand(){
                hand = {{test_hand|json}};
                $( "#hand_area" ).html('');
                for(var i=0; i < hand.length ; i++){

                $( "#hand_area" ).append('<li class="ui-state-highlight sortable" value="'+hand[i]+'">'+hand[i]+'</li>');

                }
        }


    function checkdictionary(word,csrf_token) {

                                       $.ajax({
                                       type: "POST",
                                       url: "/dictionary/",
                                       traditional: true,
                                       data: {
                                               'word': word,
                                               csrfmiddlewaretoken: csrf_token,
                                             },
                                       success: function(data) {
                                              if (data=="True")
                                                   {                                console.log("true");

                                                    }else

                                                   {
                                                           console.log("false");
                                                     $("#list-"+word+" " ).addClass("notindict");
                                                     $( "#list-"+word+" " ).hide("slide", { direction: "left" }, 300);
                                                    $( "#notexist" ).show();
                                                    wrong_word_list.push(word);

                                                    setTimeout(function(){ $( "#notexist" ).hide(); }, 1000);

                                                  }

                                                        }

                                    });
    }

       update_hand();
        $( document ).keydown(function(event) {

                if (event.key === "Backspace"){
                        $( "#new_word_area li:last" ).detach().appendTo( "#hand_area" );
                        var letter_deleted = word.pop();
                        if (letter_deleted)
                        {
                        hand.push(letter_deleted);
                        }

                        event.preventDefault();

                 }else if( event.key === "Enter" && $( "#new_word_area li").length >= {{Constants.test_min_nb_letters}} ){

                         word_str = word.toString().replace(new RegExp(',', 'g'), '');
    console.log(word_str);
                         if(word_list.indexOf(word_str) != -1){
                            if(wrong_word_list.indexOf(word_str)!= -1 )
                            {
                               $( "#not_new_and_wrong" ).show();
                              $( "#not_new" ).hide();

                                    }else{
                              $( "#not_new" ).show();
                              $( "#not_new_and_wrong" ).hide();
                                            }
                         $( "#new_word_area li" ).remove();
                          word = [];
                         $( "#word_list" ).prepend('<span id="duplicated-'+word_str+'" class="test_word">'+word_str+'</span>');
                         $( "#duplicated-"+word_str+"").hide("slide", { direction: "left" }, 300);
                           update_hand();

                             event.preventDefault();
                                 }else{

                         $( "#not_new_and_wrong" ).hide();

                         $( "#not_new" ).hide();

                        $( "#new_word_area li" ).remove();
                        word = [];
                         $( "#word_list" ).prepend('<span id="list-'+word_str+'" class="test_word">'+word_str+'</span>');

                        $('#id_test_words').val($('#id_test_words').val()+word_str+',');
                        word_list.push(word_str);

                        checkdictionary(word_str,"{{ csrf_token }}");
                        update_hand();
                        }

                        event.preventDefault();

                    }
                    else{


                        var letter = String.fromCharCode(event.which).toUpperCase() ;


                        var hand_index = hand.indexOf(letter);

                        if(hand_index != -1){

                                $( "#hand_area li[value*='"+letter+"']:first" ).detach().appendTo( "#new_word_area" );
                        word.push(letter);
                        hand.splice(hand_index,1);
                            event.preventDefault();
                        }else{
                            event.preventDefault();
                        }

                }

        });

    });
    </script>
{% endblock %}