/*
* This component is designed for use anywhere, however its primary purpose is to be
 * used within the resource-slider-column component.
* The column is many resource-cards of a particular category.
* To use the resource-card independently, you must know the corresponding resource_card_id from the database
* ex: <resource-card resource-card-id=1></resource-card>
* */
(function(){
    "use strict";

    angular.module('raz')

        .component('resourceCard', {
            templateUrl: '/js/angular/resource-card/resource-card.html',
            bindings: {
                resourceCardId: '@',
                index: '@'
            },
            controller: 'resourceCard'
        })
        .controller('resourceCard', ['resourceCardService', function(resourceCardService){
            var ctrl = this;

            ctrl.$onInit = function() {
                var resource = resourceCardService.getResource(ctrl.resourceCardId);
                extractResourceMetadata(resource);
            };

            ctrl.getResourceCardDivClass = function(isPack){
                var classname = "resourceCard";
                if (isPack){
                    classname += " resourceCard-pack";
                }

                return classname;
            };

            ctrl.getImageClass = function(){
                var classname = "resourceCard_img";
                if (ctrl.thumbnailSrcUrl.indexOf("resource-card") < 0){
                    classname += " resourceCard_img-notCropped";
                }

                return classname;
            };

            ctrl.getPopoutClass = function(){
               if (ctrl.index === "3" || ctrl.index === "4"){
                   return "{ my: 'right top', at: 'right bottom+10', collision: 'fit none' }";
               }
               else
                   return "{ my: 'left top', at: 'left bottom+10', collision: 'fit none' }";
            };

            function getDetailedLevelString(resource){
                var levelsArray = [];
                if (resource.level)
                    levelsArray.push("Level " + resource.level);
                if (resource.lexile)
                    levelsArray.push("Lexile " + resource.lexile);
                if (resource.grade){
                    var grade = resource.grade.indexOf("Grade") > -1 ? resource.grade : "Grade " + resource.grade;
                    levelsArray.push(grade);
                }
                var levelsString = levelsArray.join(" | ");
                return levelsString;
            }

            function extractResourceMetadata(resource){
                ctrl.thumbnailSrcUrl = resource.image.url;
                ctrl.title = resource.title === "I'd Like To Be" ? "Me gustaria ser" : resource.title;
                ctrl.subtitle = resource.subtitle;
                ctrl.resourceType = resource.resourceType;
                ctrl.genre = buildGenreString(resource.genre1, resource.genre2);
                ctrl.translationLanguages = resource.languages;
                ctrl.level = resource.level;
                ctrl.allLevels = getDetailedLevelString(resource);
                ctrl.isPopular = true;
                ctrl.isNew = false;
                ctrl.length = resource.length && resource.length !== "0" ? resource.length : "";
                ctrl.imageClass = ctrl.getImageClass();
                ctrl.resourceCardDivClass = ctrl.getResourceCardDivClass(resource.isPack);

                ctrl.popoutPosition = ctrl.getPopoutClass();
            }

            function titleCaseWord(str) {
                return str.replace(str[0], function(t) { return t.toUpperCase() });
            }

            function buildGenreString(genre1, genre2){
                if (genre1 === null)
                    return "";
                genre1 = titleCaseWord(genre1);
                genre2 = genre2 ? " | " + genre2 : "";
                return genre1 + genre2;
            }



        }])
})();