(function (window) {
    "use strict";

    window.ls.container.get('view').add({
        selector: 'data-forms-pell',
        controller: function(element, window, document, markdown) {
            var div = document.createElement('div');

            element.className = 'pell hide';
            div.className = 'input pell';
            element.parentNode.insertBefore(div, element);
            element.tabIndex = -1;

            var turndownService = new TurndownService();

            turndownService.addRule('underline', {
                filter: ['u'],
                replacement: function (content) {
                    return '__' + content + '__'
                }
            });

            var editor = window.pell.init({
                element: div,
                onChange: function onChange(html) {
                    element.value = turndownService.turndown(html); // Change HTML to Markdown
                },
                defaultParagraphSeparator: 'p',
                actions: [
                    {
                        name: 'bold',
                        icon: '<i class="icon-bold"></i>'
                    },
                    {
                        name: 'underline',
                        icon: '<i class="icon-underline"></i>'
                    },
                    {
                        name: 'italic',
                        icon: '<i class="icon-italic"></i>'
                    },
                    {
                        name: 'olist',
                        icon: '<i class="icon-list-numbered"></i>'
                    },
                    {
                        name: 'ulist',
                        icon: '<i class="icon-list-bullet"></i>'
                    }
                ]
            });

            element.addEventListener('change', function () {
                editor.content.innerHTML = markdown.render(element.value); // Change Markdown to HTML (mainly for editing purpose)
            });

            editor.content.setAttribute('placeholder', element.placeholder);
            editor.content.innerHTML = markdown.render(element.value);
            editor.content.tabIndex = 0;

            editor.content.onkeydown = function preventTab(event) {
                if (event.which === 9) {
                    event.preventDefault();

                    // Inspired by: https://stackoverflow.com/a/35173443/2299554
                    //add all elements we want to include in our selection
                    if (document.activeElement) {
                        var focussable = Array.prototype.filter.call(document.querySelectorAll('a:not([disabled]), button:not([disabled]), select:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])'),
                            function (element) {
                                //check for visibility while always include the current activeElement
                                return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
                            });

                        var index = focussable.indexOf(document.activeElement);

                        if(index > -1) {
                            if(event.shiftKey) { // Move up
                                var prevElement = focussable[index - 1] || focussable[focussable.length - 1];
                                prevElement.focus();
                            }
                            else { // Move down
                                var nextElement = focussable[index + 1] || focussable[0];
                                nextElement.focus();
                            }
                        }
                    }
                }
            };

            var clean = function (e) {
                e.stopPropagation();
                e.preventDefault();

                var clipboardData = e.clipboardData || window.clipboardData;
                window.pell.exec('insertText', clipboardData.getData('Text'));
                return true;
            };

            div.addEventListener('paste', clean);
            div.addEventListener('drop', clean);
        }
    });

})(window);