var dialogManager = {
    defaultButton: {
        text: "OK",
        right: true,
        active: true
    },
    showDialog: function (caption, message, buttons) {
        var dialogContainer = $("#dialog-container");

        var dialogTitle = dialogContainer.find(".dialog-title");
        var dialogMessage = dialogContainer.find(".dialog-message");

        var actionLeft = dialogContainer.find(".dialog-card-action-left");
        var actionRight = dialogContainer.find(".dialog-card-action-right");

        dialogTitle.html(caption);
        dialogMessage.html(message);

        var leftButtons = [];
        var rightButtons = [];

        if (!buttons) {
            buttons = [this.defaultButton];
        }

        for (var i = 0; i < buttons.length; i++) {
            var button = $("<button />");
            button.addClass("btn");

            if (!buttons[i].active) {
                button.addClass("btn-flat");
            }

            button.html(buttons[i].text);
            
            if (buttons[i].callback) {
                button.on("click", buttons[i].callback);
            }
            else {
                button.on("click", dialogManager.hideDialog);
            }

            if (buttons[i].right) {
                rightButtons.push(button);
            } else {
                leftButtons.push(button);
            }
        }

        actionLeft.html(leftButtons);
        actionRight.html(rightButtons);

        dialogContainer.show();
    },

    hideDialog: function () {
        var dialogContainer = $("#dialog-container");
        dialogContainer.hide();
    }
};
var browserHelper = {

    //http://stackoverflow.com/questions/11582512/how-to-get-url-parameters-with-javascript/11582513#11582513
    getURLParameter: function(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
    }
}

var stringHelper = {
    getVariable: function(key){
        for (var variable in survey.currentPage.Variables) {
            if (survey.currentPage.Variables[variable].ID == key) {
                return survey.currentPage.Variables[variable].Value;
            }
        }
        return null;
    },

    formatString: function (stringarray) {
        var stringToFormat = stringarray[0];
        var i = 0;
        var placeholder = "\\{" + i + "\\}";
        var re = new RegExp(placeholder, 'g');
        while (re.test(stringToFormat)) {
            i++;
            stringToFormat = stringToFormat.replace(re, stringarray[i]); // replace is done with regex, because otherwise, only the first accurence is getting replaced
            placeholder = "\\{" + i + "\\}";
            re = new RegExp(placeholder, 'g');
        }
        return stringToFormat;
    },

    formatStringsWithVariables: function (stringarray) {
        var replacedStrings = [];
        replacedStrings.push(stringarray[0]);
        for (var i = 1; i < stringarray.length; i++) {
            replacedStrings.push(stringHelper.getVariable(stringarray[i]));
        }
        return stringHelper.formatString(replacedStrings);
    },
    escapeHTMLEntityMap : {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
        '/': '&#x2F;',
        '`': '&#x60;',
        '=': '&#x3D;'
    },

    escapeHtml: function(html) {
    return String(html).replace(/[&<>"'`=\/]/g, function (s) {
        return stringHelper.escapeHTMLEntityMap[s];
    });
}
}

/* includes for IE-Support */
// http://stackoverflow.com/a/31221374/6154762
if (!String.prototype.includes) {
    String.prototype.includes = function () {
        'use strict';
        return String.prototype.indexOf.apply(this, arguments) !== -1;
    };
}
var navigationManager = {
    getUserTimeStamp: function myfunction() {
        var dateString = new Date($.now()).toJSON();
        return dateString;
    },
    jump: function (nextHistoryKey) {
        var nextUrl = "/Survey/Jump?nextHistoryKey=" + nextHistoryKey;

        this.submitPage(nextUrl);
    },

    goToPageGroup: function (pageGroupTo) {
        var nextUrl = "/Survey/GoToPageGroup?pageGroupTo=" + pageGroupTo;

        this.submitPage(nextUrl);
    },

    goBack: function () {
        var currentHistoryKey = browserHelper.getURLParameter("historyKey");
        var nextUrl = "/Survey/GoBack?currentKey=" + currentHistoryKey;

        this.submitPage(nextUrl);
    },

    proceed: function () {
        if (this.pageValid()) {
            var currentHistoryKey = this.getCurrentHistoryKey();
            var nextUrl = "/Survey/Proceed?currentKey=" + currentHistoryKey;

            this.submitPage(nextUrl);
        } else {
            var message = toolTipMessages.DefaultValidationErrorMessage;
            if (survey.currentPage.CustomValidationErrorMessage) {
                message = survey.currentPage.CustomValidationErrorMessage;
            }
            dialogManager.showDialog(toolTipMessages.DefaultValidationErrorTitle, message);
        }
    },

    onPageLoaded: function () {

    },

    finish: function () {
        var nextUrl = "/Survey/Finish?currentKey=" + this.getCurrentHistoryKey();
        this.submitPage(nextUrl);
    },

    end: function () {
        var nextUrl = "/Survey/End?currentKey=" + this.getCurrentHistoryKey();
        this.submitPage(nextUrl);
    },

    pageValid: function () {
        $("input.validate").blur();
        $("input.validate:not(.valid)").addClass("invalid");
        var validationFunction = function () { return true; };
        if (survey.currentPage.Validation) {
            eval("validationFunction = " + survey.currentPage.Validation);
        }
        return validationFunction();
    },

    submitPage: function (nextUrl) {
        if (typeof pauseCountdown === "function") {
            pauseCountdown();
        }
        var form = $("form");
        var userAnswers = form.serialize()

        showLoadingBar();

        (userAnswers) ? userData = userAnswers + "&timeStampUserSent=" + this.getUserTimeStamp() : userData = "timeStampUserSent=" + this.getUserTimeStamp()

        $.ajax({
            url: nextUrl + "&isAjax=true",
            type: "post",
            dataType: "json",
            data: userData,

            success: function (data, textstatus, xhrreq) {
                if (data.RedirectURL) {
                    location.href = data.RedirectURL;
                    return;
                }
                navigationManager.updateHistoryState(xhrreq.getResponseHeader("history-key"));
                buildPage(data);
                if (navigationManager.onPageSubmitted) {
                    navigationManager.onPageSubmitted();
                }
            },

            error: function (data, textStatus, errorThrown) {
                dialogManager.showDialog(toolTipMessages.DefaultRequestErrorTitle,
                    toolTipMessages.DefaultRequestErrorMessage,
                    [
                        {
                            text: "Neu laden",
                            callback: function () {
                                location.reload();
                            }
                        },
                        dialogManager.defaultButton
                    ]);
            }
        });
    },

    updateHistoryState: function (currentHistoryKey) {
        if (currentHistoryKey) {
            window.history.pushState({}, "Survey", "/Survey/Show?historyKey=" + currentHistoryKey);
        } else {
            window.history.pushState({}, "Survey", "/Survey/End");
        }
    },

    getCurrentPageIndex: function () {
        var currentHistoryKey = this.getCurrentHistoryKey();
        return survey.currentPage.PageInformations.findIndex((p) => p.HistoryKey == currentHistoryKey);
    },

    getCurrentHistoryKey: function () {
        return browserHelper.getURLParameter("historyKey");
    },
    getNumberOfTotalPages: function () {
        return survey.currentPage.PageInformations.length;
    },
    isFirstPage: function () {
        return navigationManager.getCurrentPageIndex() == 0;
    },
    isLastPage: function () {
        return navigationManager.getCurrentPageIndex() == navigationManager.getNumberOfTotalPages() - 1;
    }
};

window.onpopstate = function () {
    location.reload();
}
class Page extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            page: this.props.page,
            key: Math.random()
        }

        this.onPageChanged = this.onPageChanged.bind(this);
        this.getViews = this.getViews.bind(this);

        pageElementAccessor.onPageChanged = this.onPageChanged;
    }

    getViews() {
        var views = [];

        var key = this.state.key;

        this.state.page.Content.forEach(function (content, index) {
            views.push(<View Content={content} ViewURL={content.ViewURL} key={"PageKey-" + key + "-Content-" + index} />);
        });

        return views;
    }

    onPageChanged(page) {
        this.setState({ page: page, key: Math.random() });
    }

    componentDidMount() {
        navigationManager.onPageLoaded();

        $("form").submit(false);
        this.preventEnter();

        $.ajax({
            url: "/Survey/UpdateExecutionLogUserSeenPage",
            type: "post",
            dataType: "json",
            data: {
                "jsonDateTime": new Date($.now()).toJSON()
            }
        }).done(function (data, textstatus, jqXHR) {
            if (data && data.Success) {
                console.log("ExecutionLog TimeLeft Updated")
            } else {
                console.log("ExecutionLog TimeLeft Not successful")
            }
        }).fail(function (data, textStatus, errorThrown) {
            console.log("ExecutionLog TimeLeft Update failed; internal Server Error")
        });

    }

    componentWillUpdate() {
        $(".page").hide();
    }

    componentDidUpdate() {
        $(".page").fadeIn("slow");
    }

    preventEnter() {
        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                return false;
            }
        })
    }

    render() {
        return <form className="d-flex flex-column h-100">
            {this.getViews()}
        </form>
    }
}
var styleManager = {
    customStyleElement: null,

    getOrCreateCustomStyleElement: function(){
        if (!styleManager.customStyleElement) {
            styleManager.customStyleElement = document.createElement("style");
            document.getElementsByTagName("head")[0].appendChild(styleManager.customStyleElement);
        }
        return styleManager.customStyleElement;
    },

    addRule: function (rule) {
        styleManager.getOrCreateCustomStyleElement().innerHTML += rule;
    }
};
var survey = {
    currentPage: {},
    lastViewId: 0
}

function showLoadingBar() {
    $("#preloader").show("slow");
}

function hideLoadingBar() {
    $("#preloader").hide("slow");
}

var mainElement = document.getElementById('main');
var pageElement = {};
var pageElementAccessor = {};

function buildPage(page) {
    survey.currentPage = page;
    viewManager.packageName = page.PackageName;
    pageElement = <Page page={page} key={survey.lastViewId++}/>;
    ReactDOM.render(
        pageElement,
        mainElement
    );
    viewManager.updateLoadState();
    window.scrollTo(0, 0);
    onPageBuilt();
}

function onPageBuilt() {}

/*

writes following to console:

###################################################################################################
#.................................................................................................#
#...######..##.....##.########..##.....##.########.##....##.########..#######...#######..##.......#
#..##....##.##.....##.##.....##.##.....##.##........##..##.....##....##.....##.##.....##.##.......#
#..##.......##.....##.##.....##.##.....##.##.........####......##....##.....##.##.....##.##.......#
#...######..##.....##.########..##.....##.######......##.......##....##.....##.##.....##.##.......#
#........##.##.....##.##...##....##...##..##..........##.......##....##.....##.##.....##.##.......#
#..##....##.##.....##.##....##....##.##...##..........##.......##....##.....##.##.....##.##.......#
#...######...#######..##.....##....###....########....##.......##.....#######...#######..########.#
#.................................................................................................#
###################################################################################################

generated with: http://patorjk.com/software/taag/#p=display&f=Banner4&t=SurveyTool%0A

*/
function printLogo() {
    console.log(
        "%c\n███████████████████████████████████████████████████████████████████████████████████████████████████\n█                                                                                                 █\n█   ██████  ██     ██ ████████  ██     ██ ████████ ██    ██ ████████  ███████   ███████  ██       █\n█  ██    ██ ██     ██ ██     ██ ██     ██ ██        ██  ██     ██    ██     ██ ██     ██ ██       █\n█  ██       ██     ██ ██     ██ ██     ██ ██         ████      ██    ██     ██ ██     ██ ██       █\n█   ██████  ██     ██ ████████  ██     ██ ██████      ██       ██    ██     ██ ██     ██ ██       █\n█        ██ ██     ██ ██   ██    ██   ██  ██          ██       ██    ██     ██ ██     ██ ██       █\n█  ██    ██ ██     ██ ██    ██    ██ ██   ██          ██       ██    ██     ██ ██     ██ ██       █\n█   ██████   ███████  ██     ██    ███    ████████    ██       ██     ███████   ███████  ████████ █\n█                                                                                                 █\n███████████████████████████████████████████████████████████████████████████████████████████████████",
        'background: #466DE9; color: #000;'
    );
}

console.clear();
printLogo();
var validationManager = {
    allInputsAreValid: function () {
        return $("input").length == $("input.valid").length;
    },

    validateAllValidatables: function(){
        var valid = true;

        validatables = $(".validate");
        for (var i = 0; i < validatables.length; i++) {
            if (validatables[i].validate) {
                valid = valid & validatables[i].validate();
            }
        }

        return valid ? true : false;
    },

    invalidMarkedInputExisting: function(){
        return $("input.invalid").length > 0;
    },

    onInputCallback: function () {
        // override by project
    },

    globalOnInput: function () {
        this.onInputCallback();
    }
};
var viewManager = {
    packageName: "Default",
    views: {},

    renderViewIfPossible: function (viewElement, viewURL) {
        if (this.viewURLisRegistered(viewURL)) {
            if (this.viewURLisLoaded(viewURL)) {
                viewElement.onViewLoaded();
            } else {
                this.registerViewElementAsSubscriber(viewURL, viewElement);
            }
        } else {
            this.registerViewURL(viewURL, viewElement);

            if (this.viewURLisExisting(viewURL)) {
                this.markViewURLasLoaded(viewURL);
                viewElement.onViewLoaded();
            } else {
                this.requestViewFromServer(viewURL);
            }
        }
    },

    viewURLisRegistered: function (viewURL) {
        return this.views[viewURL] != null;
    },

    viewURLisLoaded: function(viewURL){
        if(this.views[viewURL]){
            return this.views[viewURL].isLoaded;
        }
        throw new Error("View not registered");
    },

    markViewURLasLoaded: function(viewURL){
        this.views[viewURL].isLoaded = true;
        viewManager.updateLoadState();
    },

    viewURLisExisting: function(viewURL){
        var typeOfViewURL = eval("typeof " + viewURL.replace("/", "_"));
        if (typeOfViewURL == "undefined") {
            return false;
        } else if (typeOfViewURL == "function") {
            return true;
        } else {
            throw new TypeError("View URL is not valid");
        }
    },

    registerViewElementAsSubscriber: function(viewURL, viewElement){
        this.views[viewURL].subscribers.push(viewElement);
    },

    registerViewURL: function (viewURL, viewElement) {
        this.views[viewURL] = {
            isLoaded: false,
            subscribers: viewElement ? [viewElement] : [],
            dependendViews: [],
            requiredViews: [],
            data: null
        }
    },

    getRequiredViewURLs: function(data){
        var indexOfRequires = data.indexOf("//requires");
        if (indexOfRequires != -1) {
            var indexOfEnd = data.indexOf(";", indexOfRequires + 1);
            return data.substring(indexOfRequires, indexOfEnd).replace("//requires ", "").split(",");
        } else {
            return [];
        }
    },

    onViewReceived: function (data, viewURL) {
        var requiredViewURLs = this.getRequiredViewURLs(data);

        for (var i = 0; i < requiredViewURLs.length; i++) {
            var requiredViewURL = requiredViewURLs[i].replace("_", "/");

            if (this.viewURLisRegistered(requiredViewURL)) {
                if (!this.viewURLisLoaded(requiredViewURL)) {
                    this.views[viewURL].requiredViews.push(requiredViewURL);
                    this.views[requiredViewURL].dependendViews.push(viewURL);
                }
            } else {
                this.registerViewURL(requiredViewURL);

                if (this.viewURLisExisting(requiredViewURL)) {
                    this.markViewURLasLoaded(requiredViewURL);
                } else {
                    this.requestViewFromServer(requiredViewURL);
                    this.views[viewURL].requiredViews.push(requiredViewURL);
                    this.views[requiredViewURL].dependendViews.push(viewURL);
                }
            }
        }

        if (this.views[viewURL]) {
            this.views[viewURL].data = data;
        } else {
            throw new Error("view not registered yet " + viewURL);
        }

        this.loadViewIfPossible(viewURL);
    },

    loadViewIfPossible: function (viewURL) {
        if (this.views[viewURL].requiredViews.length == 0) {
            $.globalEval(this.views[viewURL].data);

            this.markViewURLasLoaded(viewURL);
            this.removeDependenciesFromLoadedView(viewURL);

            for (var i = 0; i < this.views[viewURL].subscribers.length; i++) {
                this.views[viewURL].subscribers[i].onViewLoaded();
            }

            this.updateLoadState();
        }
    },

    updateLoadState: function () {
        for (var viewURL in this.views) {
            if (!this.views[viewURL].isLoaded) {
                return;
            }
        }

        try{
            hideLoadingBar();
        }catch(Error){
            console.log("updateLoadState failed");
        }
    },

    removeDependenciesFromLoadedView: function(loadedViewURL){
        for (var i = 0; i < this.views[loadedViewURL].dependendViews.length; i++) {
            var dependendViewURL = this.views[loadedViewURL].dependendViews[i];
            this.removeDependencyFromLoadedView(loadedViewURL, dependendViewURL);
            this.loadViewIfPossible(dependendViewURL);
        }
    },

    removeDependencyFromLoadedView: function(loadedViewURL, dependendViewURL){
        var indexOfLoadedView = this.views[dependendViewURL].requiredViews.indexOf(loadedViewURL);
        if (indexOfLoadedView == -1) {
            throw new Error("The given dependendViewURL: " + dependendViewURL + " is not dependend on " + loadedViewURL + " (anymore)");
        } else {
            this.views[dependendViewURL].requiredViews.splice(indexOfLoadedView, 1);
        }
    },

    requestViewFromServer: function (viewURL) {
        var requestURL = "/View/Get?package=" + this.packageName + "&viewIdentification=" + viewURL;

        $.ajax(requestURL, {
            method: "GET",
            dataType: "text",
            success: function (data, textStatus, jqxhr) {
                viewManager.onViewReceived(data, viewURL);
            },
            fail: function () {
                console.log("Failed to load viewURL: " + viewURL);
                // TODO: render all views as error
            }
        });
    },

    componentMountCallback: function (component) {

    },

    onComponentMounted: function (component) {
        this.componentMountCallback(component);
    }
}

viewManager.registerViewURL("View");
viewManager.markViewURLasLoaded("View");

function replaceView(view, componentName) {
    view.onViewLoaded();
}

function createComponentByName(componentName, props, children) {
    var commandToRun = "React.createElement(" + componentName.replace("/", "_") + ", props, children);";
    return eval(commandToRun);
}

class View extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            id: survey.lastViewId++,
            isLoaded: false,
            loadingFailed: false
        };

        this.onViewLoaded = this.onViewLoaded.bind(this);
        this.getContent = this.getContent.bind(this);

        viewManager.renderViewIfPossible(this, this.props.ViewURL);
    }

    getContent() {
        if (this.state.isLoaded) {
            return createComponentByName(this.props.ViewURL, this.props, this.props.children);
        } else if (this.state.loadingFailed) {
            return <ErrorView />
        }
        else {
            return <Preloader />
        }
    }

    onViewLoaded() {
        var self = this;
        setTimeout(function () {
            self.setState({ isLoaded: true });
        }, 0); // delayed because the view might not be mounted yet
    }

    onViewLoadingFailed() {
        var self = this;
        setTimeout(function () {
            self.setState({ isLoaded: true, loadingFailed: true });
        }, 0); // delayed because the view might not be mounted yet
    }

    componentDidUpdate() {
        if (this.state.isLoaded) {
            var self = this;

            setTimeout(function () {
                $("#" + self.state.id).addClass("view-loaded");

            }, 0);
        }
    }

    render() {
        if (this.state.isLoaded) {
            return this.getContent();
        }
        return <span className="view" id={this.state.id}>{this.getContent()}</span>
    }
}

class Preloader extends React.Component {
    render() {
        return <div className="preloader">
                <div className="">
                    <div className=""></div>
                </div>
        </div>
    }
}

class ErrorView extends React.Component {
    render() {
        return <div className="red">
                <p>Error Loading View</p>
        </div>
    }
}

class Markup extends React.Component {
    constructor(props) {
        super(props);

        this.createMarkup = this.createMarkup.bind(this);
    }

    createMarkup() {
        if (typeof this.props.children != "string") {
            throw new TypeError("Cannot markup a non-string");
        }
        var converter = new showdown.Converter();
        return { __html: converter.makeHtml(this.props.children) };
    }

    render() {
        return <span className={"markup " + this.props.customClass} dangerouslySetInnerHTML={this.createMarkup()}></span>
    }
}