//SYMFONY
let puzzleId = 0;

$(document).ready(function(){

    //FORM
    let polling = false;
    let pollId = 0;
    let pollErrors = 0;
    let startErrors = 0;
    let getErrors = 0;
    let stats = "";
    let placedWordsNoDesign;

    init();
    
    function init() {
        checkAddDesign();
        setTimeout(loadTooltip, 1000);
        showStepZero();
        loadCookieDataToForm();
    } 

    function showStepZero() {
        if (Cookies.get("puzzleId") && window.location.pathname === "/woordzoeker-maken") {
            $( "#input_step_0" ).removeClass("hide");
            $("#frmContinuePuzzleId").val(Cookies.get("puzzleId"));
        }    
    }

    function loadCookieDataToForm() {
        
        if (typeof Cookies.get('wzf_words') === "undefined") {
            return;
        }

        $("#taWords").val(Cookies.get('wzf_words'));
        $("#txtSolution").val(Cookies.get('wzf_solution'));
        $("#slcGridSize").val(Cookies.get('wzf_gridsize'));
        $("#slcAttempts").val(Cookies.get('wzf_attempts'));
        $("#slcFillRandom").val(Cookies.get('wzf_fill_random'));        
        $("#slcWordPlacement").val(Cookies.get('wzf_word_placement'));

        showHideSolutionField();

        if (typeof Cookies.get('wzf_email') !== "undefined") {
            $("#txtEmail").val(Cookies.get('wzf_email'));
        }

        if (typeof Cookies.get('wzf_deduplicate') !== "undefined") {
            $("#slcDeduplicate").val(Cookies.get('wzf_deduplicate'));
        }
    }

    $(".btnInputAdvanced").click(function() {
        $(".fldAdvanced.toggle").slideToggle();
        $(".btnInputAdvanced").toggleClass("opened");
        return false;
    });

    $("#slcFillRandom").change(function() {
        showHideSolutionField();
        return false;
    });

    function showHideSolutionField() {
        if ($("#slcFillRandom").val() == "true") {
            $("#txtSolution").addClass("hide");
            $(".no-solution-message").removeClass("hide");
        }
        else {
            $("#txtSolution").removeClass("hide");
            $(".no-solution-message").addClass("hide");
        }
    }
    
    $("#btnStart").click(function() {
        scrollToTop();
    });

    $("#btnRestart").click(function() {
        $( "#input_step_0" ).addClass("hide");
        Cookies.remove("puzzleId");
    });

    $("#btnContinue").click(function() {
        $( "#continueForm" ).submit();
    });
    
    $("#btnStartEngine").click(function() {
        deActiveDesign();
        startEngine();
    });
    
    function startEngine() {
        $( "#input_step_0" ).addClass("hide");
        Cookies.remove("puzzleId");
        
        if (validateWords() === false) {
            return false;
        }

        if ($("#btnStartEngine" ).hasClass("disabled")) {
            return false;
        }

        if ($("#slcFillRandom").val() !== "true")
        {
            if (validateSolution() === false) {
                return false;
            }
        }

        sanitizeChars($("#taWords"));
        sanitizeChars($("#txtSolution"));

        setTimeout(scrollToResult, 500);
        
        if (polling === true) {
            return false;
        }
        
        $("#tool-form").removeClass().addClass("col-xs-12 col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 col-lg-4");
        $("#tool-result").removeClass().addClass("col-xs-12 col-sm-12 col-md-8 col-lg-8");
        
        $( "#input_step_1" ).addClass("clicked");
        $( "#btnStartEngine" ).addClass("disabled");
        $('.step_buttons.step_1 .goto').addClass('hide');
        $( "#result-message" ).removeClass("hide");
        $( "#result-message" ).html( "<div class=\"loader\"><span style=\"width:0%\">loading</span></div><div class=\"loader_info\"><p>Initializing process...<br/><br/></p></div>" );
        $( "#result" ).html("");
       
        pollId = Math.floor(Math.random() * 26) + Date.now();
       
        //Get input lets
        let words = $("#taWords").val();
        let solution = $("#txtSolution").val();
        let gridsize = $("#slcGridSize").val();
        let attempts = $("#slcAttempts").val();
        let mixSolution = $("#slcMixSolution").val();
        let fillRandom = $("#slcFillRandom").val();        
        let wordPlacement = $("#slcWordPlacement").val();        
        let deduplicate = $("#slcDeduplicate").val();

        //Store input lets
        Cookies.set('wzf_words', words);
        Cookies.set('wzf_solution', solution);
        Cookies.set('wzf_gridsize', gridsize);
        Cookies.set('wzf_attempts', attempts);
        Cookies.set('wzf_fill_random', fillRandom);
        Cookies.set('wzf_word_placement', wordPlacement);
        Cookies.set('wzf_deduplicate', deduplicate);

		$.ajax({
			method: "POST",
			url: "api/wordfinder/startup",
			crossDomain: true,
			data: {
				words: words,
				solution: solution,
				gridsize: gridsize,
				attempts: attempts,
				mixSolution: mixSolution,
				fillRandom: fillRandom,
				pollId: pollId,
				wordPlacement: wordPlacement,
				deduplicate: deduplicate,
			},
			timeout: 60000
		}).done(function (data) {
			//start polling
			startErrors = 0;
			polling = true;
			setTimeout(doPoll, 1000);
		}).error(function (data) {
			startErrors++;

			if (startErrors < 5) {
				setTimeout(startEngine, 10000);
			} else {
				$("#result-message").html("<div class=\"alert alert-warning\"><strong>Ojee, er is iets mis gegaan :(</strong><br/>Vernieuw de pagina en probeer het nog een keer. Als het dan nog steeds niet werkt kun je het best later weer terugkomen.</div>");
			}
		});   
    }
    
    function scrollToTop() {
        $("html, body").animate({
            scrollTop: $(".tool").offset().top
        }, 500);
    }
    
    function scrollToResult() {
        $("html, body").animate({
            scrollTop: ($("#tool-result").offset().top - 70)
        }, 500);
    }
    
    function doPoll(){
        $.ajax({
            method: "POST",
            url: "api/wordfinder/poll_status",
            crossDomain: true,    
			data: { pollId: pollId },
			timeout: 60000
        }).done(function(data) {
            pollErrors = 0;
            
            // process data
            if (polling)
            {
                let arrData = data.split(":");
                let currentAttempt = arrData[0];
                let totalAttempt = arrData[1];
                let succesfullAttempts = arrData[2];    
                let succesfullAttemptsPerc = currentAttempt > 0 ? Math.round((succesfullAttempts/currentAttempt)*100) : 0;
                let placedWords = arrData[3];    
                let totalWords = arrData[4];    
                let progress = (currentAttempt/totalAttempt)*100;
                
                let status = "<p>Attempts: "+currentAttempt+"/"+totalAttempt+"<br/>";                
                status += "Succes: "+succesfullAttempts+" ("+succesfullAttemptsPerc+"%)<br/>";
                status += "Placed words: "+placedWords+"/"+totalWords;                
                status += "</p>";
                
                if ($(".loader").length) {
                    $(".loader>span").css("width", progress+"%");
                    $(".loader_info").html(status);
                } else {
                    $( "#result-message" ).html( "<div class=\"loader\"><span style=\"width:"+progress+"%\">loading</span></div><div class=\"loader_info\">"+status+"</div>" );
                }

                if (currentAttempt == totalAttempt) {
                    polling = false;
                    getWordfinder();
                } else {
                    setTimeout(doPoll,500);
                }
            }                
        }).error(function(data) {
            pollErrors++;
            
            if (pollErrors < 20) {
                setTimeout(doPoll,2000);
            } else {
                $( "#result-message" ).html( "<div class=\"alert alert-warning\"><strong>Ojee, er is iets mis gegaan :(</strong><br/>Vernieuw de pagina en probeer het nog een keer. Als het dan nog steeds niet werkt kun je het best later weer terugkomen.</div>" );              
            }   
        });
    }
    
    function getWordfinder() {
        $.ajax({
            method: "POST",
            url: "api/wordfinder",
            data:  { 
                pollId: pollId,
			},
			timeout: 60000
		}).done(function (data) {
			getErrors = 0;
            processWordfinder(data);

            if (stats.succes === "1") {
                $('.step_buttons.step_1 .goto').removeClass('hide');
                $('.next-button-tip .alert').removeClass('hide');
            }
            
		}).error(function (data) {
			getErrors++;

			if (getErrors < 5) {
				setTimeout(getWordfinder, 1000);
			} else {
				$("#result-message").html("<div class=\"alert alert-warning\"><strong>Ojee, er is iets mis gegaan :(</strong><br/>Vernieuw de pagina en probeer het nog een keer. Als het dan nog steeds niet werkt kun je het best later weer terugkomen.</div>");
			}
		});
    }

    function processWordfinder(data)
    {
        let arrHtml = data.split("|=|");    
        let statsString = arrHtml[0];            
        let messageHtml = arrHtml[1];
        let puzzleHtml = arrHtml[2];            
        puzzleId = arrHtml[3];            
        
        //Update payment forms
		$("#frmPaymentPleasantPuzzleId").val(puzzleId);
		$("#frmPaymentCompletePuzzleId").val(puzzleId);
		$("#frmPaymentCompleteOnAccountPuzzleId").val(puzzleId);
		$("#frmPaymentWithCreditPuzzleId").val(puzzleId);

        //Stats
        stats = JSON.parse(statsString);
        
        //Add html to message
        $( "#result-message" ).html( messageHtml );                
        $( "#result" ).html( puzzleHtml );

        //Re-activate create button
        $( "#btnStartEngine" ).removeClass("disabled");    

        //Build solve links                
        let solveLink = 'https://'+window.location.hostname+'/oplossen/'+puzzleId+'.html';
        
        //Socials links
        let fbShareLink = "https://www.facebook.com/sharer/sharer.php?u="+solveLink;
        let fbPopupLink = "window.open(\""+fbShareLink+"\",\"Delen op Facebook\",\"width=554,height=266,scrollbars=no,toolbar=no,location=no\"); return false";
        $( "#btnFacebook" ).attr("href", fbShareLink);
        $( "#btnFacebook" ).attr("onclick", fbPopupLink);
        
        let twShareLink = "https://twitter.com/share?url="+solveLink;
        let twPopupLink = "window.open(\""+twShareLink+"\",\"Delen op Twitter\",\"width=554,height=266,scrollbars=no,toolbar=no,location=no\"); return false";
        $( "#btnTwitter" ).attr("href", twShareLink);
        $( "#btnTwitter" ).attr("onclick", twPopupLink);
    }

    function validateWords()
    {
        let valid = false;
    
        if ($("#taWords").val() === "")
        {
            $("#taWords").parent().addClass("has-error");
        }
        else if($("#taWords").val().indexOf(",") === -1 && $("#taWords").val().indexOf("\n") === -1)
        {
            $("#taWords").parent().addClass("has-error");
            $("#taWords").parent().append("<div class='error comma-message'><strong><em>Gebruik een komma of enter als scheidingsteken</em></strong></div>");
        }
        else
        {
            $("#taWords").parent().removeClass("has-error");
            $(".comma-message").remove();
            valid = true;
        }
        
        return valid;        
    }

    function sanitizeChars(charsField) {
        let words = charsField.val()
            .replace(/ij/g, "ij")
            .replace(/IJ/g, "IJ");

        charsField.val(words);
    }

    function validateSolution()
    {
        let valid = false;
    
        if ($("#txtSolution").val() === "")
        {
            $("#txtSolution").parent().addClass("has-error");
        }
        else
        {
            $("#txtSolution").parent().removeClass("has-error");
            valid = true;
        }
        
        return valid;        
    }

    $( document ).on( "keyup", "#txtTitle", function() {
        $(".wfTitle").html($(this).val());
    });

    $( document ).on( "keyup", "#taDescription", function() {
        let desc = $(this).val().replace(/\n/g, "");
        $(this).val(desc);
        $(".wfText").html(desc);
    });

    $( document ).on( "change", "#slcCapitalLetters", function() {
        if ($(this).val() == "true") {
            $(".puzzle").removeClass("lowercase");
            $(".placed_words").removeClass("lowercase");    
        } else {
            $(".puzzle").addClass("lowercase");
            $(".placed_words").addClass("lowercase");   
        }
    });

    //DESIGN
    function checkAddDesign() {
        if (!!$('#word_finder').data('design') && $('#word_finder').data('design') !== 'none') {
            activateDesign($('#word_finder').data('design'));
        }
    }
    
    $(document).on("change", "#slcDesign", function () {
        let design = $(this).val();
        if (design !== "none") {
            activateDesign(design);
        } else {
            deActiveDesign();
        }
    });

    function activateDesign(design) {
        disableSimpleStep();
        addDesign(design);
        $('.design-screen-info').removeClass('hide');
        $('.license-message-design').removeClass('hide');
    }

    function disableSimpleStep() {
        $('.package-simple').addClass('disabled');
    }

    function addDesign(design) {
        removeDesignClasses();
        $(".result-container").addClass('theme preview');
        $(".result-container").addClass(design);

        let width = $(".result-container").width();

        if (pxTomm(width) > 210) {
            let newWidth = mmToPx(210);
            $(".result-container").css('width', newWidth + 'px');

            let proportionateHeight = newWidth * 297 / 210;
            $(".result-container").css('height', proportionateHeight + 'px');
        }

        transLocatePlacedWords();

        if ($('#word_finder').hasClass('grid-20')) {
            $('#canvas').width('562');
            $("#word_finder").width('562');
            return;
        }

        if ($('#word_finder').hasClass('grid-19')) {
            $('#canvas').width('553');
            $("#word_finder").width('553');
            return;
        }

        $("#word_finder").width($(".puzzle").width()+1);
    }

    function transLocatePlacedWords() {
        if (!placedWordsNoDesign) {
            placedWordsNoDesign = $("#placed_words").html();
        }

        let placedWords;

        if ($('.puzzle').hasClass('lowercase')) {
            placedWords = $("<ul class='placed_words lowercase'></ul>");
        } else {
            placedWords = $("<ul class='placed_words'></ul>");
        }

        $(".placed_words li").each(function (index) {
            placedWords.append($(this));
        });

        $("#placed_words").html(placedWords);
        $("#placed_words").prependTo("#word_finder");
    }

    function deActiveDesign() {
        removeDesign();
        enableSimpleStep();
        $('#slcDesign').val('none');
        $('.design-screen-info').addClass('hide');
        $('.license-message-design').addClass('hide');
    }

    function removeDesign() {
        removeDesignClasses();
        $(".result-container").removeAttr('style');
        $("#result").removeAttr('style');
        $("#word_finder").removeAttr('style');
        $("#placed_words").html(placedWordsNoDesign);
        $("#placed_words").insertAfter(".puzzle");
        placedWordsNoDesign = "";
    }

    function removeDesignClasses() {
        $(".result-container").removeClass('theme preview party trendy classic stylish happy saint-nicholas saint-nicholas-2 christmas christmas-classic summer autumn winter valentine spring mothers-day halloween men-stuff golden-stars kingsday');
    }

    function enableSimpleStep() {
        $('.package-simple').removeClass('disabled');
    }

    //EXAMPLE WORD SETS
    $("#slcExample").change(function() {
        let arrExample = $("#slcExample").val().split(":");
        $("#taWords").val(arrExample[0]);
        $("#txtSolution").val(arrExample[1]);
        $("#taWords").addClass("active");
        $("#txtSolution").addClass("active");

        return false;
    });    

    //WORD FINDER
    $( document ).on( "mouseenter", ".btnPlaceWord", function() {
        let coords = $(this).data("coords");
        let arrCoords = coords.split(",");
                
        let index;        
        for (index = 0; index < arrCoords.length; ++index) {
            $(".cell."+arrCoords[index]).addClass("highlight");
        }    
    });

    $( document ).on( "mouseleave", ".btnPlaceWord", function() {
        let coords = $(this).data("coords");
        let arrCoords = coords.split(",");
                
        let index;        
        for (index = 0; index < arrCoords.length; ++index) {
            $(".cell."+arrCoords[index]).removeClass("highlight");
        }
    });

    $( document ).on( "click", ".btnPlaceWord", function() {
        let coords = $(this).data("coords");
        let arrCoords = coords.split(",");
        
        $(this).addClass("checked");
        $(".btnReset").removeClass("disabled");
        $(".placed-words-tip .tip").hide();
        
        let index;        
        for (index = 0; index < arrCoords.length; ++index) {
            $(".cell."+arrCoords[index]).addClass("check");
            $(".cell."+arrCoords[index]).removeClass("highlight");
        }        
        
        return false;
    });    

    $( document ).on( "click", ".btnReset", function() {
        $(".cell").removeClass("check");
        $(".cell").removeClass("highlight");
        $(".btnPlaceWord").removeClass("checked");
        $(".btnReset").addClass("disabled");
        return false;
    });
    
    $( document ).on( "click", ".btnToggleSolution", function() {
        $(".solution .word .char span").toggle();
        return false;
    });
    
    $( document ).on( "click", ".goto", function() {
        let activeStep = $(this).data("step");
        let gotoStep = $(this).data("step-goto");
        let directionStep = $(this).data("step-direction");

        if (!isStepValid(activeStep, directionStep)) {
            return;
        }

        if (directionStep !== "back") {
            afterStepHandler(activeStep, gotoStep);
        }

        //remove active input step
        $( "#input_step_"+activeStep ).addClass("hide");
        
        //show goto input step
        $( "#input_step_"+gotoStep ).removeClass("hide");
        
        //Activate next header step
        $( ".step.step"+activeStep ).removeClass("active");
        $( ".step.step"+gotoStep ).addClass("active");
        
        scrollToTop();
        
        return false;
    });

    function isStepValid(step, directionStep) {
        if (directionStep === "back") {
            return true;
        }

        let valid = true;

        if (String(step) === "2") {
            if (!isEmail($("#txtEmail").val())) {
                $("#txtEmail").parent().addClass('has-error');
                valid = false;
            } else {
                $("#txtEmail").parent().removeClass('has-error');
            }
        }

        return valid;
    }

    function afterStepHandler(step, gotoStep) {
        if (String(step) === "1") {
            $('#result-message').addClass('hide');
            $('.next-button-tip .alert').addClass('hide');
            $(".wfTitle").html($('#txtTitle').val());
            $(".wfText").html($('#taDescription').val());
        }
        
        if (String(step) === "2") {
            updateWordfinderSettings();
            checkPaymentLaterForFreeEmails();
        }
        
        if (String(step) === "3") {
            $('#word-finder-overlay').hide();
            $(".solution .word .char span").hide();
            updateLicense();
        }
    }

    function updateWordfinderSettings()
    {
        Cookies.set('wzf_email', $("#txtEmail").val());

        $.post("api/wordfinder/settings", {
            puzzleId: puzzleId, 
            title: $("#txtTitle").val(),
            description: $("#taDescription").val(),
            capital: $("#slcCapitalLetters").val(),
            design: $("#slcDesign").val(),
            email: $("#txtEmail").val()
        });
    }

    function updateLicense() {
        $.post("api/wordfinder/settings", {
            puzzleId: puzzleId, 
            license: "CC BY-NC-SA 4.0"            
        });
    }

    $("#btnEmbed").click(function() {    
        $("#taEmbed").slideToggle();
        return false;
    });

    //FEEDBACK
    $("#btnFeedback").click(function() {        
        if ($("#taFeedback").val() != "")
        {
            let data = "https://woordzoekerfabriek.nl/printen/"+getPuzzleId()+'.html';
            data += getBrowserData();

            $.post("api/wordfinder/email/feedback",{ text: $("#taFeedback").val(), data: data}).done(function( data ) {
                $(".feedback .form").addClass("hide");
                $(".feedback .result").removeClass("hide");
            });            
        }
        
        return false;
    });
    
    function getBrowserData() {
        let browserData = "\n\nBrowser CodeName: "+navigator.appCodeName;
        browserData += "\nBrowser Name: "+navigator.appName;
        browserData += "\nBrowser Version: "+navigator.appVersion;
        browserData += "\nCookies Enabled: "+navigator.cookieEnabled;
        browserData += "\nBrowser Language: "+navigator.language;
        browserData += "\nBrowser Online: "+navigator.onLine;
        browserData += "\nPlatform: "+navigator.platform;
        browserData += "\nUser-agent header: "+navigator.userAgent;
        return browserData;
    }

    $( document ).on( "click", "#btnMail", function(event) {
        event.preventDefault();
        emailSelf();
        $(this).replaceWith('<p class="text-center m-top-half">Mail verzonden <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></p>');
    });

    function emailSelf() {
        $.post( "api/wordfinder/email/self",{ email: $("#txtEmail").val(), puzzleId: getPuzzleId()}).done(function( data ) {});
    }
    
    function getPuzzleId() {
        if (puzzleId != 0) {
            return puzzleId;
        }
        
        if ($('.tool').data('puzzle') != 0) {
            return $('.tool').data('puzzle');
        }
             
        return 0;
    }
    
    function isEmail(email) {
        let regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

    function checkPaymentLaterForFreeEmails() {
        let emailParts = $("#txtEmail").val().split('@');

        const freeEmailProviders = [
            'gmail.com', 'hotmail.com', 'outlook.com', 'hetnet.nl', 'xs4all.nl', 'zonnet.nl', 'home.nl', 'ziggo.nl', 'icloud.com', 'yahoo.com'
        ];

        if (freeEmailProviders.includes(emailParts[1])) {
            $('.payment-later').hide();
            $('.payment-credits').hide();
        } else {
            $('.payment-later').show();
            $('.payment-credits').show();
        }
    }
});

function loadTooltip() {
    $(function() {
      $("[data-toggle=\"tooltip\"]").tooltip();
    });    
}

let pxTomm = function (px) {
    return Math.floor(px / ($('#milimeter').height() / 100));
};

let mmToPx = function (mm) {
    return Math.floor(mm * ($('#milimeter').height() / 100));
};