const errorModal = $( '#errorModal' );
const askQuestionModal = $( '#askQuestionModal' );
const readMoreModal = $( '#readMoreModal' );
const answerModal = $( '#answerModal' );
const welcomeModal = $('#welcomeModal' );
const welcomeModalText = $('#welcomeModalText');
const welcomeModalClose = $('#welcomeModalClose' );
const answerText = $('#answer' );
const answerModalTitle = $('#answerModalLabel');
readMoreModalText = $('#readMoreModalText' );
const readMoreModalTitle = $('#readMoreModalLabel' );
const errorMsg = $( '#errorMsg' );
const askErrorMsg = $('#askErrorMsg')
const answerErrorMsg = $('#answerErrorMsg' );
const questions = $( '#questions' )
const question = $('#question' );
const askButton = $('#askBtn' );
const nickname = $('#nickname' );
let is_owner = false;

function request( a_uri, a_data, a_successhandler, a_errorhandler )
{
    $.ajax(
        {
            url: "?c=Faq&a=" + a_uri,
            type: 'POST',
            data: JSON.stringify( a_data ),
            dataType: 'json',
            success: function (result)
            {
                a_successhandler(result);
            },
            error: function ( result, errorcode  )
            {
                if( errorcode === "parseerror" )
                {
                    $('.modal').modal( 'hide' );
                    setTimeout( function(){
                        $('.modal').modal('hide');

                        errorMsg.html( 'The action was not successfully.<br>Our server sent a weird response. Cannot parse this shit lmao' );

                        errorModal.modal( 'show' );
                        askButton.prop( 'disabled', false );
                    }, 500 );
                }
                a_errorhandler( result, errorcode );

            },
        });
}


function askQuestion()
{
    askButton.prop( 'disabled', true );
    if ( !question.val() )
    {
        askErrorMsg.html( 'Please enter a question first!' );
        askButton.prop( 'disabled', false );
        return;
    }
    if ( !nickname.val() )
    {
        askErrorMsg.html( 'Please enter a name first!' );
        askButton.prop( 'disabled', false );
        return;
    }

    if( nickname.val().length > 20 || nickname.val().length < 3 )
    {
        askErrorMsg.html( 'The name should be 3-20 characters long.' );
        askButton.prop( 'disabled', false );
        return;
    }

    if( question.val().length > 500 || question.val().length < 10 )
    {
        askErrorMsg.html( 'The question should be 15-50 characters long.' );
        askButton.prop( 'disabled', false );
        return;
    }

    request( 'addQuestion', {"question":question.val(),"nickname":nickname.val()},
        function( result ){
            askErrorMsg.html( '' );
            askButton.prop( 'disabled', false );
            question.val('');
            askQuestionModal.modal( 'hide' );
        }, function( result ) {
            askButton.prop( 'disabled', false );
            switch( result.status )
            {
                case 901:
                case 902:
                    askErrorMsg.html( "Something wrong happened. We don't know why...<br>Try again later please!" );
                    break;
                case 903:
                    askErrorMsg.html( "The question should contain at least 10 up to 500 characters!<br>The nickname should contain at least 3 up to 20 characters!" );
                    break;
                default:
                    $('.modal').modal('hide');
                    setTimeout( function( result ){
                        errorMsg.html( "The action was not successfully.<br>Maybe the room doesn't exist anymore.<br>Also may check your internet connection." );
                        errorModal.modal( 'show' );

                    }, 500 );
            }
        }
    );
}

function openReadMoreModal( id )
{
    readMoreModal.modal( 'show' );
    readMoreModalText.html( 'Loading...' );
    readMoreModalTitle.html( 'Question from: Anonymous' );
    request( 'getQuestion', {"question_id":id}, function( result )
    {
        let _answer = '';
        if( result.data.answer === null || result.data.answer.length < 5 )
        {
            _answer = 'So far there is no answer to this question.';
        }
        else
        {
            _answer = result.data.answer;
        }
        readMoreModalTitle.html( 'Question from: ' + result.data.created_by );
        readMoreModalText.html( '<strong>Question</strong><br>' + result.data.question +
                                '<hr><strong>Answer</strong><br>' + _answer
        );
    }, function() {
        readMoreModalText.html( 'An error occurred, please try again later!' );
    });

}

let answer_id = 0;
function openAnswerModal( id )
{
    answerModalTitle.html( 'Answer ' + 'XXX' + " question" );
    answerErrorMsg.html( '' );

    if( !is_owner )
    {
        errorModal.modal( 'show' );
        errorMsg.html( 'You are not allowed to answer questions!<br>Ask the room-owner for permissions.' );
        return;
    }

    answerModal.modal( 'show' );

    request( 'getQuestion', {"question_id":id}, function( result )
    {
        answerModalTitle.html( 'Answer ' + result.data.created_by + "'s question" );
        if( result.data.answer !== null && result.data.answer.length > 5 )
        {
            answerText.val( result.data.answer );
        }
        else
        {
            answerText.val( '' );
        }
        answer_id = result.data.id;
    }, function() {
        answerErrorMsg.html( 'An error occurred, please try again!' );
    });
}

function answer()
{
    answerErrorMsg.html( '' );
    if( answer_id === 0 )
    {
        return;
    }

    if( answerText.val().length < 5 || answerText.val().length > 1000 )
    {
        answerErrorMsg.html( 'The answer should contain 10-1000 characters!' );
        return;
    }

    request( 'addAnswer', {"question_id":answer_id,"answer":answerText.val()}, function( result )
    {
        answerErrorMsg.html( '' );
        answerModal.modal( 'hide' );
    }, function( result ) {
        switch( result.status )
        {
            case 905:
                answerErrorMsg.html( 'You are not allowed to answer questions!' );
                break;
            default:
                answerErrorMsg.html( 'An error occurred. Please try again later!' );
        }

    });
}

function getQuestions()
{
    request( 'getQuestions', {}, function (result)
    {
        let questions_list = [];

        for (let i = 0; i < result.data.questions.length; i++)
        {
            questions_list.push( 'q_' + result.data.questions[i].id );
            if( $('#q_' + result.data.questions[i].id ).length < 1 )
            {
                questions.append( '<div class="col-sm-6 col-lg-4 col-md-5"><div class="card" id="q_' + result.data.questions[i].id + '" style=" margin-bottom: 10px;">' +
                    '    <div class="card-body">' +
                    '        <h5 class="card-title text-warning">Question</h5>' +
                    '        <h6 class="card-subtitle mb-2 text-muted">From ' + result.data.questions[i].created_by + '</h6>' +
                    '        <p class="card-text">'+ result.data.questions[i].question + '</p>' +
                    '        <a href="#" onclick="openReadMoreModal(\''+ result.data.questions[i].id + '\');" class="card-link">Read more</a>' +
                    '        <a href="#" onclick="openAnswerModal(\'' + result.data.questions[i].id + '\');" class="card-link">Answer</a>' +
                    '    </div>' +
                    '   </div>' +
                    '</div> ' )
            }
            else if ( $( '#qa_' + result.data.questions[i].id ).length < 1 && result.data.questions[i].answer !== null && result.data.questions[i].answer.length > 5 )
            {
                $('#q_' + result.data.questions[i].id + ' p' ).html( result.data.questions[i].question + '<hr><span id="qa_' + result.data.questions[i].id + '">' + result.data.questions[i].answer + '</span>' );
                $('#q_' + result.data.questions[i].id + ' h5').addClass( 'text-info' ).removeClass( 'text-warning' );
            }
            else if ( result.data.questions[i].answer !== $('#qa_' + result.data.questions[i].id ).html() && result.data.questions[i].answer.length > 5 )
            {
                $('#q_' + result.data.questions[i].id + ' p' ).html( result.data.questions[i].question + '<hr><span id="qa_' + result.data.questions[i].id + '">' + result.data.questions[i].answer + '</span>' );
            }



        }

        /* FIX! $('#questions').children('div').forEach( function()
        {
            if( jQuery.inArray( this.id, questions_list ) === -1 )
            {
                $(this).remove();
            }
        } );*/

    },
    function ( result )
    {

    }
    );
}

function welcomeMessage()
{
    // Starting welcome modal
    welcomeModal.modal( 'show' );
    welcomeModalClose.prop( 'disabled', true );
    request( 'getWelcomeInfo', {}, function( result ) {
        if ( result.data.is_owner === true )
        {
            welcomeModalText.html( 'You are the owner of this room.<br>This means you are allowed to ask and <strong>answer</strong> questions!<br><br>To share your room code, use the share-url or the room-code.' );
            is_owner = true;
        }
        else
        {
            welcomeModalText.html( 'You are an guest of this room.<br>This means you are allowed to ask questions.<br>To ask a question, click on "Ask a question", then enter your name and your question.' );
            is_owner = false;
        }
        setTimeout( function() { welcomeModalClose.prop( 'disabled', false ); }, 500 );
    }, function()
    {
        is_owner = false;
        setTimeout( function() {
            welcomeModal.modal('hide');
        }, 500 );
        setTimeout( function(){
            errorMsg.html( "Oopsie! Your user information cannot be loaded.<br>Try reloading the page!" );

            errorModal.modal( 'show' );

        }, 800 );
    });

}



getQuestions();
setInterval( function() { getQuestions(); }, 1500 );
setTimeout( function() { welcomeMessage(); }, 500 );