@**
* Yona, 21st Century Project Hosting SW
*
* Copyright Yona & Yobi Authors & NAVER Corp.
* https://yona.io
**@
@(from: Integer, size: Integer)

@import utils.TemplateHelper._
@import utils.JodaDateUtil
@import utils.HtmlUtil

@notifycationIcon(notifytype: EventType, state: String) = @{
    notifytype match {
        case EventType.NEW_COMMENT
             | EventType.NEW_REVIEW_COMMENT
             | EventType.REVIEW_THREAD_STATE_CHANGED => { "comment2"}
        case EventType.NEW_ISSUE | EventType.ISSUE_STATE_CHANGED => {
            if(state=="closed") "list-alt closed"
            else "list-alt"
        }
        case EventType.ISSUE_ASSIGNEE_CHANGED => { "friends changed" }
        case EventType.NEW_POSTING => { "edit2" }
        case EventType.NEW_PULL_REQUEST | EventType.PULL_REQUEST_COMMIT_CHANGED | EventType.PULL_REQUEST_STATE_CHANGED => {
            if(state=="closed") "merge closed"
            else if(state=="merged") "merge merged"
            else  "merge"
        }
        case EventType.MEMBER_ENROLL_REQUEST => {
            if(state=="ACCEPT") "addfriend closed"
            else if (state=="CANCEL") "addfriend rejected"
            else  "addfriend"
        }
        case EventType.NEW_COMMIT =>{"push"}
        case EventType.PULL_REQUEST_REVIEW_STATE_CHANGED => {"preview changed"}
        case EventType.ISSUE_BODY_CHANGED => {"ellipsis-horizontal"}
        case EventType.COMMENT_UPDATED => {"ellipsis-horizontal"}
        case _ => {"megaphone"}
    }
}

@defining(NotificationEvent.findByReceiver(UserApp.currentUser, from, size)){ notifications =>
    @if(notifications.size == 0){
    <div class="warning-none">
        <i class="yobicon-danger"></i> @Messages("notification.none")
    </div>
    }

    @for(noti <- notifications){
    <li class="notification-stream">
        @defining(User.find.byId(noti.senderId)){ user =>
        @if(noti.eventType.equals(EventType.ISSUE_BODY_CHANGED) || noti.eventType.equals(EventType.COMMENT_UPDATED) ){
            <div class="stream-type updated">
                Edit
            </div>
        } else {
            <div class="stream-type @notifycationIcon(noti.eventType,noti.newValue)">
                <i class="yobicon-@notifycationIcon(noti.eventType,noti.newValue)"></i>
            </div>
        }
        <div class="stream-desc" data-target="message-@noti.id" data-toggle="learnmore">
            <div class="stream-info">
                <div class="title">
                    @noti.getUrlToView match {
                        case null => { @noti.title }
                        case url => { <a href="@url">@noti.title</a> }
                    }
                </div>
                <div class="message-wrap nowrap" id="message-@noti.id">
                    <div class="message">@Html(HtmlUtil.defaultSanitize(noti.getMessage.replaceAll("(?<!>)\n", "<br/>\n")))</div>
                </div>
                <div class="meta">
                    @if(user != null){
                        <a class="avatar-wrap smaller" href="@routes.UserApp.userInfo(user.loginId)">
                            <img src="@user.avatarUrl" >
                        </a>
                    } else {
                        <div class="smaller">
                            <img src="@routes.Assets.at("images/default-avatar-64.png")" width="42" height="42">
                        </div>
                    }
                    @if(user != null) {
                        <a href="@routes.UserApp.userInfo(user.loginId)" class="author">@user.getDisplayName</a>@@@user.loginId
                    }
                    <span class="ago pull-right" title="@JodaDateUtil.getDateString(noti.created)">
                        @agoOrDateString(noti.created)
                    </span>
                </div>
            </div>
        </div>
        }
    </li>
    }
}
@if(NotificationEvent.findByReceiver(UserApp.currentUser, from, size).size != 0) {
<li><a href="javascript:void(0);" id="notification-more" class="ybtn">More</a></li>
<script type="text/javascript">
    $(document).ready(function(){
        function checkOverflow(el) {
            var curOverflow = el.style.overflow;

            if (!curOverflow || curOverflow === "visible")
                el.style.overflow = "hidden";

            var isOverflowing = el.clientWidth < el.scrollWidth
                    || el.clientHeight < el.scrollHeight;

            el.style.overflow = curOverflow;

            return isOverflowing;
        }

        $("#notification-more").click(function() {
            $("#notification-more").remove();
            $.get("@routes.NotificationApp.notifications(from + size, size)", function(data) {
                $('.activity-streams').append(data);
                $(".more").remove();
                $(".message-wrap").each(function(index, value){
                    var $this = $(this);
                    if(checkOverflow($this[0])){
                        $this.after("<div class='more'>...</div>");
                    }
                });
            });
        });
    });
</script>
}