;(function (define, undefined) {
    'use strict';
    define(['gettext', 'jquery', 'underscore', 'backbone', 'logger', 'moment', 'edx-ui-toolkit/js/utils/html-utils',
            'common/js/components/views/paging_header', 'common/js/components/views/paging_footer',
            'text!templates/bookmarks/bookmarks-list.underscore'
        ],
        function (gettext, $, _, Backbone, Logger, _moment, HtmlUtils,
                  PagingHeaderView, PagingFooterView, BookmarksListTemplate) {

        var moment = _moment || window.moment;

        return Backbone.View.extend({

            el: '.courseware-results',
            coursewareContentEl: '#course-content',
            coursewareResultsWrapperEl: '.courseware-results-wrapper',

            errorIcon: '<span class="fa fa-fw fa-exclamation-triangle message-error" aria-hidden="true"></span>',
            loadingIcon: '<span class="fa fa-fw fa-spinner fa-pulse message-in-progress" aria-hidden="true"></span>',

            errorMessage: gettext('An error has occurred. Please try again.'),
            loadingMessage: gettext('Loading'),

            defaultPage: 1,

            events : {
                'click .bookmarks-results-list-item': 'visitBookmark'
            },

            initialize: function (options) {
                this.template = HtmlUtils.template(BookmarksListTemplate);
                this.loadingMessageView = options.loadingMessageView;
                this.errorMessageView = options.errorMessageView;
                this.langCode = $(this.el).data('langCode');
                this.pagingHeaderView = new PagingHeaderView({collection: this.collection});
                this.pagingFooterView = new PagingFooterView({collection: this.collection});
                this.listenTo(this.collection, 'page_changed', this.render);
                _.bindAll(this, 'render', 'humanFriendlyDate');
            },

            render: function () {
                var data = {
                    bookmarksCollection: this.collection,
                    humanFriendlyDate: this.humanFriendlyDate
                };

                HtmlUtils.setHtml(this.$el, this.template(data));
                this.pagingHeaderView.setElement(this.$('.paging-header')).render();
                this.pagingFooterView.setElement(this.$('.paging-footer')).render();
                this.delegateEvents();
                return this;
            },

            showBookmarks: function () {
                var view = this;

                this.hideErrorMessage();
                this.showBookmarksContainer();

                this.collection.getPage(this.defaultPage).done(function () {
                    view.render();
                    view.focusBookmarksElement();
                }).fail(function () {
                    view.showErrorMessage();
                });
            },

            visitBookmark: function (event) {
                var bookmarkedComponent = $(event.currentTarget);
                var bookmark_id = bookmarkedComponent.data('bookmarkId');
                var component_usage_id = bookmarkedComponent.data('usageId');
                var component_type = bookmarkedComponent.data('componentType');
                Logger.log(
                    'edx.bookmark.accessed',
                    {
                       bookmark_id: bookmark_id,
                       component_type: component_type,
                       component_usage_id: component_usage_id
                    }
                ).always(function () {
                    window.location.href = event.currentTarget.pathname;
                });
            },

            /**
             * Convert ISO 8601 formatted date into human friendly format. e.g, `2014-05-23T14:00:00Z` to `May 23, 2014`
             * @param {String} isoDate - ISO 8601 formatted date string.
             */
            humanFriendlyDate: function (isoDate) {
                moment.locale(this.langCode);
                return moment(isoDate).format('LL');
            },

            areBookmarksVisible: function () {
                return this.$('#my-bookmarks').is(":visible");
            },

            hideBookmarks: function () {
                this.$el.hide();
                $(this.coursewareResultsWrapperEl).hide();
                $(this.coursewareContentEl).css( 'display', 'table-cell');
            },

            showBookmarksContainer: function () {
                $(this.coursewareContentEl).hide();
                // Empty el if it's not empty to get the clean state.
                this.$el.html('');
                this.$el.show();
                $(this.coursewareResultsWrapperEl).css('display', 'table-cell');
            },

            showLoadingMessage: function () {
                this.loadingMessageView.showMessage(this.loadingMessage, this.loadingIcon);
            },

            hideLoadingMessage: function () {
                this.loadingMessageView.hideMessage();
            },

            showErrorMessage: function () {
                this.errorMessageView.showMessage(this.errorMessage, this.errorIcon);
            },

            hideErrorMessage: function () {
                this.errorMessageView.hideMessage();
            },

            focusBookmarksElement: function () {
                this.$('#my-bookmarks').focus();
            }
        });
    });
}).call(this, define || RequireJS.define);
