(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",
        "terminology",
        function ($rootScope, itemService, itemsModals, $filter, terminology) {
            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.terminology = terminology;
                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.shareFolder = function (itemSummary) {
                    itemsModals.shareFolder(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);
                };

                scope.canManageItems = function () {
                    return $rootScope.currentRole.functions.find(item => item === "stuff_items_manage");
                }
            }
        },
    ]);

    // Directive that displays the Item summary (e.g. as used on the main mystuff page)
    app.directive("listItemSummary", [
        "$rootScope",
        "itemService",
        "itemsModals",
        "$filter",
        "terminology",
        function ($rootScope, itemService, itemsModals, $filter, terminology) {
            return {
                restrict: "EA",
                require: "focusWithin",
                scope: {
                    item: "=",
                    displayStyle: "=",
                    currentShowcase: "=",
                    inCurrentShowcase: "=",
                    showcaseItem: "=",
                    editItemFromShowcase: "=",
                    removeItemFromShowcase: "=",
                    transferMode: "=",
                },
                templateUrl: templatePath + "list-item-summary.html",
                link: link,
            };

            function link(scope, _e, _a, focusWithin) {
                scope.terminology = terminology;
                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.shareFolder = function (itemSummary) {
                    itemsModals.shareFolder(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);
                };

                // Get the thumbnail for the item
                scope.getItemBackground = function (item) {
                    if (item.itemType != "Status") {
                        return {
                            "background-image": "url(" + getThumbnail(item) + ")",
                        };
                    }
                };

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

                function getThumbnail(item) {
                    return item.overideDisplay
                        ? item.overideValue
                        : 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 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: "=",
                    style: "@",
                    iconStyle: "@"
                },
                template:
                    '<div class="item-icon-wrapper" style="{{style}}" ng-class="{\'inline\': inline}"><div class="item-icon" style="{{iconStyle}}" 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: "=",
                    additonalClass: "@"
                },
                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");

                    switch (scope.fileType) {
                        case "video":
                            scope.maxFileSize = config.maxVideoUpload / 1e6;
                            break;
                        case "image":
                            scope.maxFileSize = config.maxImageUpload / 1e6;
                            break;
                        default:
                            scope.maxFileSize = config.maxFileUpload / 1e6;
                            break;
                    }

                    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);
                    });
                },
            };
        },
    ]);
})();