"use strict";

angular.module("vocabulary")
    .component("wordSelectionList", {
        templateUrl: "/js/redesign-angular/lessonBuilder/chosenWords/word-selection-list.html",
        controller: "WordSelectionListController",
        bindings: {
            words: "<",
            userDefined: "<?"
        }
    })
    .controller("WordSelectionListController",
        ["$sce", "$state", "lessonService", "partsOfSpeechService", function ($sce, $state, lessonService, partsOfSpeechService) {
            var ctrl = this;
            this.$onInit = init;


            ctrl.isMediumWord = false;
            ctrl.isLargeWord = false;
            ctrl.isSmallWord = false;
            ctrl.chooseWord = lessonService.toggleChosenWord;
            ctrl.wordIsChosen = lessonService.wordIsChosen;
            ctrl.abbreviatePartOfSpeech = partsOfSpeechService.abbreviate;
            ctrl.trustAsHtml = $sce.trustAsHtml;

            function init() {
                var lengthOfLongestWord = findLongestWord();
                if(lengthOfLongestWord <= 12){
                    ctrl.isSmallWord = true;
                }else if (lengthOfLongestWord <= 20){
                    ctrl.isMediumWord = true;
                }else{
                    ctrl.isLargeWord = true;
                }
            }

            function findLongestWord() {
                var longestWord = "";

                ctrl.words.forEach(function(word) {
                    if(word.wordName.length > longestWord.length) {
                        longestWord = word.wordName;
                    }
                });

                return longestWord.length;
            }

            ctrl.getState = function () {
                return $state.$current.name;
            }
        }]);