(function () {
    'use strict';
    var app = angular.module('items');
    var templatePath = modulesSharedResourcesUrl + 'Modules/Items/Views/Directives/';
   
    // Directive that displays the Item summary (e.g. as used on the main mystuff page)
    app.directive('itemSummary', ['$rootScope', 'itemService', 'itemsModals', '$filter', 'itemsDataContext',
        function ($rootScope, itemService, itemsModals, $filter, itemsDataContext) {
            return {
                restrict: 'E',
                require: 'focusWithin',
                scope: {
                    item: '=',
                    displayStyle: '=',
                    currentShowcase: '=',
                    inCurrentShowcase: '=',
                    showcaseItem: '=',
                    editItemFromShowcase: '=',
                    removeItemFromShowcase: '=',
                    transferMode: '='
                },
                templateUrl: templatePath + 'item-summary.html',
                link: link,
            };

            function link(scope, _e, _a, focusWithin) {

                scope.focusWithin = focusWithin;

                // Get the icon for the item
                scope.getItemIcon = function (item) {
                    return itemService.getItemIcon(item);
                }

                // Get the date for the item
                scope.getItemDate = function (item) {
                    return moment($filter('UTCDate')(item.addedDate)).fromNow();
                }

                // Preview the item
                scope.previewItem = function (itemSummary) {
                    itemsModals.preview(itemSummary);
                }

                // Recycle the item - use a modal to confirm
                scope.recycleBinItem = function (itemSummary) {
                    itemsModals.recycle(itemSummary);
                }

                // Remove item from folder - use a modal to confirm
                scope.removeItemFromFolder = function (itemSummary) {
                    itemsModals.removeItemFromFolder(itemSummary);
                }

                // Delete folder - use a modal to confirm
                scope.deleteFolder = function (itemSummary) {
                    itemsModals.deleteFolder(itemSummary);
                }

                scope.browseFolder = function (item) {
                    $rootScope.$broadcast('BrowseFolderItems', item);
                }

                scope.transferItem = function (item) {
                    $rootScope.$broadcast('TransferItemToFolder', item);
                }

                scope.browseTransferFolder = function (item) {
                    $rootScope.$broadcast('BrowseTransferFolderItems', item);
                }

                scope.editItem = function (item) {
                    itemsModals.editItem(item);
                }
            }
        }]);

    // A directive for item details within an item summary
    app.directive('itemDetails', ['$filter', '$rootScope', function ($filter, $rootScope) {
        return {
            restrict: 'E',
            scope: {
                item: '=',
            },
            templateUrl: templatePath + 'item-details.html',
            link: link
        };

        function link(scope) {

            // Get the date for the item
            scope.date = moment($filter('UTCDate')(scope.item.addedDate)).fromNow();

            // Get the thumbnail for the item
            scope.getItemBackground = function () {

                if (scope.item.itemType != 'Status') {
                    return {
                        'background-image': 'url(' + getThumbnail() + ')'
                    }
                };
            }

            // Get the summary for the item
            scope.getItemSummary = function () {
                return getTrimmedSummary(scope.item.summary || scope.item.details);
            }

            scope.browseFolder = function () {
                scope.item.isTransferItem ? $rootScope.$broadcast('BrowseTransferFolderItems', scope.item) : $rootScope.$broadcast('BrowseFolderItems', scope.item);
            }

            function getThumbnail() {
                return scope.item.overideDisplay ? scope.item.overideValue : scope.item.thumbnailUrl;
            }

            function getTrimmedSummary(summary) {

                if (summary.length > 25) {

                    var trimmedSummary = summary.substr(0, 25);
                    var summaryEllipsis = trimmedSummary.substr(summary.length - 3, summary.length - 1);

                    return summaryEllipsis == "..."
                        ? trimmedSummary
                        : trimmedSummary + "..."
                }

                return summary;
            }
        }
    }]);

    // A directive for showing the icon for an item
    app.directive('itemIcon', ['itemService', function (itemService) {
        return {
            restrict: 'E',
            scope: {
                item: '=',
                inline: '='
            },
            template: '<div class="item-icon-wrapper" ng-class="{\'inline\': inline}"><div class="item-icon" ng-class="icon" title="{{item.itemType}} item"></div></div>',
            link: link
        };

        function link(scope) {

            // Get the icon for the item
            if (scope.item.itemType === 'Folder') {
                scope.icon = itemService.getItemIcon(scope.item);

            }
            else {
                scope.icon = itemService.getItemIcon(scope.item);
            }
        }
    }])

    // A directive to show a button to create an item
    app.directive('createItemButton', ['itemsModals', function (itemsModals) {
        return {
            restrict: 'E',
            templateUrl: templatePath + 'add-item-button.html',
            scope: {
                selectedFolder: '=',
                availableFolders: '='
            },
            link: function (scope) {

                // Open the create item modal
                scope.createItem = itemsModals.createNewItem;
                // scope.selectedFolder = scope.selectedFolder;
            }
        };
    }]);

    // A directive to show a button to edit an item
    app.directive('editItemButton', ['itemsModals', function (itemsModals) {
        return {
            restrict: 'E',
            scope: {
                itemSummary: '='
            },
            require: '^?focusWithin',
            templateUrl: templatePath + 'edit-item-button.html',
            link: function (scope, _e, _a, focusWithin) {

                scope.focusWithin = focusWithin;

                // Open the edit item modal
                scope.editItem = itemsModals.editItem;
            }
        }
    }]);

    // File input directive
    // uses two inputs and a label to show the file path
    app.directive('fileInput', function () {
        return {
            restrict: 'E',
            require: 'ngModel',
            scope: {
                file: '=ngModel',
                required: '=ngRequired',
                accept: '=',
                ariaLabel: '=',
                onFileSelect: '='
            },
            templateUrl: templatePath + 'Manage/file-input.html',
            link: function (scope, _e, _a, ngModel) {

                scope.removeFile = function () {
                    ngModel.$setViewValue(null);
                    ngModel.$commitViewValue();
                }
            }
        }
    });

    // Directive to upload image and preview by drag and drop
    app.directive('fileDropzone', ['config', function (config) {
        return {
            restrict: 'E',
            require: 'ngModel',
            scope: {
                fileType: '=',
                imagePreviewUrl: '=',
                onFileSelect: '='
            },
            templateUrl: templatePath + 'Manage/dropzone.html',
            link: function (scope, element, _a, ngModel) {

                var dropzone = element.find('.drag-area');

                scope.maxFileSize = (scope.fileType === 'video'
                    ? config.maxVideoUpload
                    : config.maxFileUpload) / 1e6;

                dropzone.on('dragenter', function (event) {

                    event.preventDefault();
                    dropzone.addClass("dragover");
                    event.originalEvent.dataTransfer.effectAllowed = 'move';
                });

                dropzone.on('dragover', function (event) {

                    event.preventDefault();
                    dropzone.addClass("dragover");
                    event.originalEvent.dataTransfer.effectAllowed = 'move';
                });

                dropzone.on('dragleave', function (event) {

                    event.preventDefault();
                    dropzone.removeClass("dragover");
                });

                dropzone.on('drop', function (event) {

                    dropzone.removeClass("dragover");

                    if (event) {
                        event.preventDefault();
                    }

                    var files = event.originalEvent.dataTransfer.files;
                    ngModel.$setViewValue(files[0]);
                    scope.onFileSelect(files);
                });
            }
        };
    }]);

})();