import showdown from '../../../js/vendor/showdown';
import htmlescape from '../../../js/vendor/showdown-htmlescape';
import newline from '../../../js/showdown-extensions/newline';
import autoembed from '../../../js/showdown-extensions/autoembed';
import poll from '../../../js/showdown-extensions/poll';
import pagedown from '../../../../resources/js/markdown/Markdown.Editor';

angular.module('footyroom')

.service('markdown', function () {
    var converter = new showdown.Converter({
        extensions: [
            htmlescape,
            newline,
            poll,
            autoembed,
        ],
        simplifiedAutoLink: true,
        tables: true,
    });

    return {
        render: function (markdown) {
            return converter.makeHtml(markdown);
        },

        _converter: converter,
    };
})

.directive('markdownEditor', ['$timeout', '$compile', 'markdown', function ($timeout, $compile, markdown) {
    var nextId = 0;

    return {
        restrict: 'E',
        template:

		'<div id="wmd-button-bar-{{ editorId }}"></div>' +
		'<div ng-if="showHelp" class="mdhelp">' +
			'<div class="spinner mdhelp-spinner"></div>' +
			'<div ng-include="\'/views/ng/markdown/help.html?3\'"></div>' +
		'</div>' +
		'<textarea id="wmd-input-{{ editorId }}" class="wmd-input" rows="{{ rows }}" tabindex="100" placeholder="{{ placeholder }}"></textarea>' +
		'<div class="wmd-preview comment-text markdown-view" ng-style="content? {}: {display: \'none\'}" ng-if="showPreview"></div>',

        scope: {
            content: '=',
            showPreview: '=',
            previewEl: '=?',
            rows: '=?',
            placeholder: '=?',
        },

        link: function (scope, element, attrs) {
            scope.rows = scope.rows || 12;
            scope.editorId = nextId++;

            function help() {
                scope.showHelp = !scope.showHelp;
                scope.$apply();
            }

            $timeout(function () {
                /** @type {HTMLInputElement} */
                const inputElement = document.querySelector('#wmd-input-' + scope.editorId);
                const previewElement = scope.previewEl
                    ? document.querySelector(scope.previewEl)
                    : document.querySelector('.wmd-preview');

                previewElement.setAttribute('id', 'wmd-preview-' + scope.editorId);

                const editor = new pagedown.Editor(markdown._converter, '-' + scope.editorId, {
                    handler: help,
                });

                inputElement.value = scope.content || window.localStorage.getItem('markdownContent');

                // We need to watch changes on content happening programmatically.
                // When they happen we need to update the textarea and call for a
                // refresh.
                scope.$watch('content', function (newValue, oldValue) {
                    window.localStorage.setItem('markdownContent', inputElement.value);

                    if (newValue !== inputElement.value) {
                        inputElement.value = newValue;
                        editor.refreshPreview();
                    }
                });

                editor.hooks.chain('onPreviewRefresh', function () {
                    // Wire up changes caused by user interaction with the editor.
                    // We need this because we don't use ng-model on textarea.
                    // Doing so leads to many redundant call for refreshes.
                    // This seems to be the best way.
                    if (scope.content !== inputElement.value) {
                        scope.$apply(function () {
                            scope.content = inputElement.value;
                        });
                    }

                    // Compile output of preview with angular. We need this because we have
                    // angular directives in the output which need to be compiled, otherwise
                    // they just don't work.
                    if (previewElement) {
                        $compile(previewElement.innerHTML)(scope);
                    }
                });

                editor.run();
            });
        },
    };
}])

.directive('forumEditor', function () {
    return {
        restrict: 'E',
        template:

		'<div id="commenter" class="forum-editor clearfix">' +
			'<div class="box">' +
				'<markdown-editor content="content" show-preview="true"></markdown-editor>' +
				'<div class="error commenter-errors" ng-show="errors" ng-bind="errors"></div>' +
				'<div class="control clearfix">' +
					'<ul class="right-menu">' +
						'<li ng-click="submit()" tabindex="120">Say it</li>' +
						'<li class="cancel" ng-if="cancel" ng-click="cancel()" tabindex="121">Cancel</li>' +
					'</ul>' +
				'</div>' +
			'</div>' +
		'</div>',

        scope: {
            showPreview: '=',
            content: '=',
            errors: '=',
            submit: '=onSubmit',
            cancel: '=onCancel',
        },
    };
})

.directive('forumCommenter', ['$http', '$window', function ($http, $window) {
    var isSaving;

    return {
        restrict: 'E',
        template: `
            <forum-editor content="content" show-preview="showPreview" errors="errors" on-submit="submit" on-cancel="cancel"></forum-editor>
            <input name="name-email-url" type="text" style="display:none !important" tabindex="-1" autocomplete="off" ng-model="nameEmailUrl">
        `,
        scope: {
            commentId: '=',
            showPreview: '=',
            postId: '=',
            cancel: '=onCancel',
        },

        link: function ($scope, $element) {
            if ($scope.commentId) {
                loadContent();
            }

            $scope.submit = function () {
                save()

                .then(function () {
                    window.localStorage.removeItem('markdownContent');
                    $window.location.reload();
                })

                .catch(function (response) {
                    $scope.errors = response.data.errors || "Something went wrong, but we don't know what. Try again later or report this to us.";

                    isSaving = false;

                    $element.find('markdown-editor').litelay({ off: true });
                });
            };

            function loadContent() {
                $element.find('markdown-editor').litelay({ spinner: true });

                $http.get('/comments/' + $scope.commentId)

                .then(function (response) {
                    $scope.content = response.data.comment.content;
                    $element.find('markdown-editor').litelay({ off: true });
                });
            }

            function save(data) {
                if (!isSaving) {
                    isSaving = true;

                    $element.find('markdown-editor').litelay({ spinner: true });

                    if ($scope.commentId) {
                        return update();
                    }
                    return create();
                }
            }

            function create() {
                return $http.post('/forum/comments', {
                    content: $scope.content,
                    honeypot: $scope.nameEmailUrl,
                    postId: $scope.postId,
                });
            }

            function update() {
                return $http.put('/forum/comments/' + $scope.commentId, {
                    content: $scope.content,
                });
            }
        },
    };
}])

/**
 * A directive that binds click event on the element, upon which the element is
 * replaced with iframe whose source is defined by the directive's attribute.
 */
.directive('frMarkdownIframe', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('click', function (e) {
                element.replaceWith('<div class="iframe-wrap"><iframe src="' + attr.frMarkdownIframe + '" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>');
            });
        },
    };
});