angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']).

    controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
        console.log('Hello from feed');
        sectionId = parseInt($stateParams.sectionId);
        if (!UserService.isInSection(sectionId)) {
            console.log('user is not enrolled in ' + sectionId);
            return $state.go('addclass');
        }
        $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
        $rootScope.debug_flashcard = false;
        $scope.cards = false;
        $scope.cardCols = []; // organized data
        $scope.numCols = 0;
        $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}

        function calculate_cols() {
            var avail = $window.innerWidth - 17;
            return Math.max(1, Math.floor(avail / 250));
        }

        $scope.refreshColumnWidth = function() {
            console.log('refreshing column width');
            avail = $window.innerWidth - 17;
            width = Math.floor(avail / Math.floor(avail / 250));
            $('.cardColumn').css({
                width: width + 'px',
                'font-size': 100 * width / 250 + '%'
            });
            $('.cardColumn .card.flashy').css({
                width: width - 12 + 'px',
                height: (width * 3 / 5) + 'px'
            });
        };

        $scope.refreshLayout = function() {
            // check if we actually need to refresh the whole layout
            if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth();
            $scope.numCols = calculate_cols();
            console.log('refreshing layout for ' + $scope.numCols + ' columns');
            $scope.cardCols = [];
            var cols = [];
            for (i = 0; i < $scope.numCols; i++) cols.push([]);
            $scope.cards.forEach(function(card, i) {
                cols[i % $scope.numCols].push(card);
                $scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card};
            });
            // wait until the next digest cycle to update cardCols

            $timeout(function() {
                $scope.cardCols = cols;
                $timeout($scope.refreshColumnWidth);
            });

        };

        angular.element($window).bind('resize', $scope.refreshLayout);

        $scope.refreshCards = function() {
            $http.get('/api/sections/' + sectionId + '/feed/').
                success(function(data) {
                    console.log(data);
                    $scope.cards = data;
                    $scope.refreshLayout();
                    console.log('success in refresh cards...');
                }).
                error(function(err) {
                    console.log('refresh fail');
                    console.log(err);
                });
        };

        $scope.add = function(card) {
            var colNum = 0;
            var lowestCol = $scope.cardCols[0];
            var lowestColNum = 0;
            while (colNum < $scope.numCols) {
                if ($scope.cardCols[colNum].length == 0) {
                    lowestCol = $scope.cardCols[colNum];
                    break;
                } else if ($scope.cardCols[colNum].length < lowestCol.length) {
                    lowestCol = $scope.cardCols[colNum];
                    lowestColNum = colNum;
                    lowestColLen = $scope.cardCols[colNum].length;
                }
                colNum++;
            }
            console.log(card);
            $scope.cards.push(data);
            $timeout(function() {
                lowestCol.unshift(card);
                $scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};
                $timeout($scope.refreshColumnWidth);
            });
        };

        $scope.sortAdd = function(card, array) {
            console.log('sort add');
            array.forEach(function(ele, i, ary) {
                if (ele.score <= card.score) {
                    ary.splice(i, 0, card);
                    return;
                }
            });
        };

        $scope.hide = function(card) {
            console.log('hiding card');
            var found = -1;
            col = $scope.cardTable[card.id].colNum;
            found = $scope.cardCols[col].indexOf(card);
            if (found != -1) {
                $scope.cardCols[col].splice(found, 1);
                console.log('card hidden');
                return col;
            }
            console.log('Error finding card to hide:');
            console.log(card);
            return -1;
        };

		$scope.update = function(id, new_score) {
			card = $scope.cardTable[id].obj;
			if (Math.abs(new_score - card.score) < .0001) {
				console.log('score same, no update required');
				return;
			}
			console.log('updating');
			console.log(card);
			var column = $scope.cardCols[$scope.cardTable[id].colNum];
			var found = column.indexOf(card);
			var i = 0;
			for (; i < column.length; i++)
				if (column[i].score <= new_score) break;
			card.score = new_score;
			if ($scope.$$phase) { // most of the time it is "$digest"
				column.splice(i, 0, column.splice(found, 1)[0]);
			} else {
				$scope.$apply(column.splice(i, 0, column.splice(found, 1)[0]));
			}
		};

        var loc = window.location, new_uri;
        if (loc.protocol === 'https:') {
            new_uri = 'wss:';
        } else {
            new_uri = 'ws:';
        }
        new_uri += '//' + loc.host;
        var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');

        ws.onopen = function() {
            console.log('websocket connected');
        };
        ws.onmessage = function(e) {
            data = JSON.parse(e.data);
            console.log('got websocket message ' + e.data);
            console.log(data);
            if (data.event_type == 'new_card') {
                $scope.add(data.flashcard);
            } else if (data.event_type == 'score_change') {
                $scope.update(data.flashcard_id, data.new_score);
            }
        };
        ws.onerror = function(e) {
            console.error(e);
        };
        ws.onclose = function(e) {
            console.log('connection closed');
        };

        var resetModal = function() {
            $('#new-card-input').html('');
            $('#newCard').closeModal(modal_options);
        };

        $scope.pushCard = function() {
            var i = 0;
            var blanks = [];
            $('#new-card-input')[0].childNodes.forEach(function(node) {
                if (typeof node.data == 'undefined') {
                    console.log('undefined node');
                    return resetModal();
                }
                node = $(node)[0];
                console.log(node);
                if (node.tagName == 'B') {
                    text = $(node).text();
                    blanks.push([i, i + text.length]);
                    i += text.length;
                } else {
                    i += node.data.length;
                }
            });
            var myCard = {
                'text': $('#new-card-input').text().trim(),
                'mask': blanks,
                section: sectionId
            };
            if (myCard.text == '') {
                console.log('blank flashcard not pushed:' + myCard.text);
                return resetModal();
            }
            $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);
                    }

                }).
                error(function(error) {
                    console.log('something went wrong pushing a card!');
                });
            return resetModal();
        };

        /* 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() {
                listenForC = false;
                console.log('modal OPENING');
                $('#new-card-input').focus();
            },
            complete: function() {
                listenForC = true;
                console.log('modal done, closing');
                $('#new-card-input').blur();
            }
        };

        $(document).keydown(function(e) {
            var keyed = e.which;
            if (keyed == 67 && listenForC) { // "c" for compose
                $('#newCard').openModal(modal_options);
                e.preventDefault();
                listenForC = false;
                return false;
            } else if (keyed == 27) { // clear on ESC
                listenForC = true;
                document.getElementById('new-card-input').value = '';
            }
        });
        $(document).ready(function() {
            $('.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();
                    $scope.pushCard();
                    listenForC = true;
                    return false;
                }
            });
            $('button#blank-selected').click(function() {
                console.log(window.getSelection());
                document.execCommand('bold');
            });
        });
        $scope.refreshCards();
        $scope.$on('$destroy', function() {
            ws.close();
            $rootScope.currentSection = {};
            $(document).off('keydown');
        });

        $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]);
            });
        };
        window.feedscope = $scope;

    });