/**
 * Created by wisestone on 2018-03-28.
 */
'use strict';

define(['app',
        'angular'],
    function (app, angular) {

        app.directive('tableUserImage', ["$log", "$compile",
            function ($log, $compile) {
                return {
                    restrict : 'AE',
                    compile : function (tElement, tAttrs) {
                        return function (scope, element, attrs) {
                            var makeTag = "";
                            scope.users = scope[attrs["tableUserImage"]][attrs["target"]];

                            if (angular.isDefined(scope.users)) {
                                for (var count = 0; count < scope.users.length; count++) {
                                    var user = scope.users[count];

                                    if (count > 1) {
                                        makeTag += "<div class='os-dropdown-trigger os-dropdown-position-left user-with-avatar'>";

                                        makeTag += "<span class='avatar'>";
                                        makeTag += "<img alt='' ng-src='" + user.profile + "'/>";
                                        makeTag += "</span>";
                                        makeTag += "<div class='os-dropdown light message-list'>";
                                        makeTag += "<ul>";

                                        var innerCount = count;

                                        //  나머지 사용자 정보를 여기서 셋팅한다.
                                        for (innerCount; innerCount < scope.users.length; innerCount++) {

                                            makeTag += "<li> <a href=''> <div class='message-content'>";
                                            makeTag += "<h6 class='message-from'> " + scope.users[innerCount].name + " </h6>";
                                            makeTag += "<h6 class='message-title'>" + scope.users[innerCount].account + "</h6>";
                                            makeTag += "</div> </a> </li> ";
                                        }

                                        makeTag += "</ul> </div>";
                                        makeTag += "</div>";

                                        makeTag += "<div class='more'>" + "+" + (innerCount - count) + "</div>";
                                        break;
                                    }
                                    else {
                                        makeTag += "<div class='os-dropdown-trigger os-dropdown-position-left user-with-avatar'>";
                                        makeTag += "<span class='avatar'>";
                                        makeTag += "<img alt='' ng-src='" + user.profile + "'/>";
                                        makeTag += "</span>";
                                        makeTag += "<div class='os-dropdown light message-list'>";
                                        makeTag += "<ul>";
                                        makeTag += "<li><a href=''><div class='message-content'>";
                                        makeTag += "<h6 class='message-from'> " + user.name + " </h6>";
                                        makeTag += "<h6 class='message-title'>" + user.account + "</h6>";
                                        makeTag += "</div></a></li></ul></div>";
                                        makeTag += "</div>";
                                    }
                                }
                            }

                            var linkFn = $compile(makeTag);
                            var content = linkFn(scope);
                            element.append(content);
                        }
                    }
                };
            }])
    });