angular.module('flashy.FeedController',
    ['ui.router',
        'ngAnimate',
        'ngWebSocket',
        'contenteditable',
        'flashy.DeckFactory']).controller('FeedController',
    function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
        angular.module('flashy.CardGridController').CardGridController.apply(this, arguments);

        (function drawCols() {
            $interval(function() {
                if ($scope.cardColsShow != $scope.cardCols) {
                    $scope.cardColsShow = $scope.cardCols;
                    console.log('interval');
                }
            }, 1000);
        }());

        $scope.updateCardScore = function(card) {
            console.log($scope.cardCols, card);
            // if no colNum is attached, then this doesn't exist on the feed yet
            if (!card.colNum) return;
            $scope.cardCols[card.colNum].sort(function(a, b) {
                return b.score - a.score;
            });
            $scope.updateColRanks($scope.cardCols[card.colNum]);
        };

        $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + sectionId + '?subscribe-broadcast');
        $scope.feed_ws.onMessage(function(e) {
            data = JSON.parse(e.data);
            console.log('message', data);
            if (data.event_type == 'new_card') {
                $scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck));
            } else if (data.event_type == 'score_change') {
                card = new Flashcard(data.flashcard);
                card.score = data.flashcard.score;
                $scope.updateCardScore(card);
            }
        });

        $scope.pushCard = function() {
            var myCard = {
                // we can't trim this string because it'd mess up the blanks. Something to fix.
                'text': $('#new-card-input').text(),
                'mask': $scope.newCardBlanks,
                section: $scope.section.id
            };
            if (myCard.text == '') {
                console.log('blank flashcard not pushed:' + myCard.text);
                return closeNewCard();
            }
            $http.post('/api/flashcards/', myCard).
                success(function(data) {
                    console.log('flashcard pushed: ' + myCard.text);
                    if (!UserService.hasVerifiedEmail()) {
                        Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
                    }
                });
            return $scope.closeNewCardModal();
        };

        /* Key bindings for the whole feed window. Hotkey it up! */
        var listenForC = true;

        // Need to pass these options into openmodal and leanmodal,
        // otherwise the ready handler doesn't get called

        modal_options = {
            dismissible: true, // Modal can be dismissed by clicking outside of the modal
            opacity: 0, // Opacity of modal background
            in_duration: 300, // Transition in duration
            out_duration: 200, // Transition out duration
            ready: function() {
                $('#new-card-input').focus();
                document.execCommand('selectAll', false, null);
            }
        };

        $(document).keydown(function(e) {
            var keyed = e.which;
            if (keyed == 67 && listenForC) { // "c" for compose
                $scope.openNewCardModal();
                e.preventDefault();
                return false;
            } else if (keyed == 27) { // clear on ESC
                $scope.closeNewCardModal();
            }
        });

        $scope.openNewCardModal = function() {
            $('#newCard').openModal(modal_options);
            listenForC = false;
            $('#new-card-input').html('Write a flashcard!');
        };

        $scope.closeNewCardModal = function() {
            listenForC = true;
            $('#new-card-input').html('').blur();
            $('#newCard').closeModal(modal_options);
        };

        $('.tooltipped').tooltip({delay: 50});
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal(modal_options);
        $('#new-card-input').on('keydown', function(e) {
            if (e.which == 13) {
                e.preventDefault();
                if ($scope.submit_enabled) {
                    $scope.pushCard();
                    listenForC = true;
                }
                return false;
            } else {

            }
        });
        $('button#blank-selected').click(function() {
            console.log(window.getSelection());
            document.execCommand('bold');
        });
        $scope.newCardBlanks = [];
        $scope.refreshNewCardInput = function() {
            $scope.newCardText = $('#new-card-input').text();
            $scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
            var i = 0;
            $scope.newCardBlanks = [];
            $('#new-card-input')[0].childNodes.forEach(function(node) {
                node = $(node)[0];
                if (node.tagName == 'B') {
                    var text = $(node).text();
                    var leftspaces = 0, rightspaces = 0;
                    // awful way to find the first non-space character from the left or the right. thanks.js
                    while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
                    while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
                    console.log(leftspaces, text.length);
                    if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
                    i += text.length;
                } else if (!node.data) {
                    i += $(node).text().length;
                } else {
                    i += node.data.length;
                }
            });
            $scope.newCardBlanks.sort(function(a, b) {
                return a[0] - b[0];
            });
            i = 0;
            newtext = '';
            $scope.newCardBlanks.forEach(function(blank) {
                newtext += $scope.newCardText.slice(i, blank[0]);
                newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
                i = blank[1];
            });
            newtext += $scope.newCardText.slice(i);
            //$scope.newCardFormattedText = newtext;
        };
        $scope.shuffleCards = function() {
            $timeout(function() {
                (function(o) {
                    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
                    return o;
                })($scope.cardCols[0]);
            });
        };
        $scope.$on('$destroy', function() {
            $scope.feed_ws.close();
        });
        return $http.get('/api/sections/' + sectionId + '/feed/').
            success(function(data) {
                console.log(data);
                $scope.cards = data.map(function(card) {
                    return new Flashcard(card, $scope.deck);
                });
                $scope.refreshLayout().then(function() {
                    $timeout($scope.refreshColumnWidth).then(function() {
                        $scope.showGrid = true;
                    });
                    console.log('layout done');
                });
            });
    });