(function () {
    'use strict';

    var app = angular.module('showcases');
    var templatePath = modulesSharedResourcesUrl + 'Modules/Showcases/Views/Directives/';

    // A directive for users to customise their showcase
    app.directive('showcaseBuilder', function () {
        return {
            restrict: 'E',
            controller: 'showcaseBuilderController',
            templateUrl: templatePath + 'showcase-builder.html'
        };
    });

    // A directive to show a published showcase in a new browser window
    app.directive('showPublishedShowcase', ['$window', function ($window) {
        return {
            restrict: 'E',
            scope: {
                shortcode: "=",
                snapshotDate: "=",
                userId: "="
            },
            template: '<button ng-click="viewPublishedShowcase()" class="btn btn-primary publish-showcase" title="View published showcase" ng-if="isVersion==false">View published showcase</button>' +
                '<button ng-click="viewPublishedShowcase()" class="btn btn-primary publish-showcase" title="View showcase version" ng-if="isVersion==true">View</button>',
            link: function (scope) {

                // View a published showcase
                scope.isVersion = Boolean(scope.snapshotDate);

                scope.viewPublishedShowcase = function () {
                    var url = 'showcase/' + scope.shortcode + '/' + scope.userId;
                    if (scope.snapshotDate)
                        url = url + '/' + scope.snapshotDate;

                    // open a new window with the preview showcase url
                    var win = $window.open(url, '_blank');
                    win.focus();
                };
            }
        };
    }]);

    // A directive to display the sidebar for the showcase builder
    app.directive('showcaseBuilderSidebar', ['fileUpload', 'showcasesService', 'config', function (fileUpload, showcasesService, config) {
        return {
            restrict: 'E',
            require: '^form',
            scope: {
                currentShowcase: '=',
                showcases: '=',
                themes: '=',
                embedItems: '=',
                updatePreview: '=',
                nameUnique: '=showcaseNameUnique',
                togglePrivacy: '='
            },
            templateUrl: templatePath + 'showcase-builder-sidebar.html',
            link: function (scope, _e, _a, formCtrl) {

                scope.headerfileName = 'Choose file';
                scope.editShowcaseForm = formCtrl;
                scope.siteUrl = config.siteUrl;

                // Showcase service functions
                scope.availableFonts = showcasesService.getFonts();
                scope.colourPalettes = showcasesService.getColourPalettes();
                scope.backgroundColours = showcasesService.getBackgroundColours();
                scope.backgroundPatterns = showcasesService.getBackgroundPatterns();
                scope.getThemeThumbnail = showcasesService.getThemeThumbnail;

                // Check that the name of the showcase is unique
                scope.checkShowcaseNameUnique = function (name) {

                    scope.nameUnique = showcasesService.checkExistingShowcaseNameUnique(scope.showcases, scope.currentShowcase, name);
                }

                // Update the showcase theme
                scope.setTheme = function (theme) {

                    var showcase = scope.currentShowcase;

                    showcase.theme = theme;
                    showcase.isFlexibleTemplate = theme.name === 'flexibletemplate';
                    scope.updatePreview();
                }

                // Update the showcase colour palette
                scope.setColourPalette = function (palette) {

                    var showcase = scope.currentShowcase;

                    showcase.palette = palette;
                    showcase.set = palette.set;
                    showcase.backgroundColour = palette.background;
                    showcase.backgroundColour = palette.backgroundColour;
                    showcase.highlightColour = palette.highlightColour;
                    showcase.fontColour = palette.fontColour;
                    showcase.paletteName = palette.name;

                    scope.updatePreview();
                }

                // Update the showcase background pattern
                scope.setBackgroundPattern = function (pattern) {

                    scope.currentShowcase.backgroundPattern = pattern.src;
                    scope.updatePreview();
                }

                // Update the showcase background colour
                scope.setBackgroundColour = function (colour) {

                    scope.currentShowcase.backgroundUrl = colour.colour;
                    scope.updatePreview();
                }

                // Handle the file upload event for the showcase builder
                scope.onFileSelect = function (files, type) {

                    scope.file = files[0];
                    scope.errorMessage = '';
                    scope.graphicHasChanged = true;

                    var reader = new FileReader();
                    if (type === 'header') {
                        scope.fileHeaderName = scope.file.name;

                        reader.readAsDataURL(scope.file);
                        reader.onload = function (event) {
                            scope.currentShowcase.headerFileAsBase64 = reader.result;
                            scope.currentShowcase.backgroundUrl = reader.result;
                            scope.updatePreview();
                        }
                    }
                    if (type === 'background') {
                        scope.fileBackgroundName = scope.file.name;

                        reader.readAsDataURL(scope.file);
                        reader.onload = function (event) {
                            scope.currentShowcase.backgroundFileAsBase64 = reader.result;
                            scope.currentShowcase.backgroundPattern = reader.result;
                            scope.updatePreview();
                        }
                    }

                    scope.fileNameIcon = scope.file.name;
                    files.originalImageFileName = scope.file.name;
                    files.imageFileSize = scope.file.size;
                    files.imageFileType = scope.file.type;


                    // check if the user has actually selected an image file else throw an error
                    if (scope.file.type !== 'image/jpeg' && scope.file.type !== 'image/png' && scope.file.type !== 'image/gif' || scope.file.type === 'image/tiff') {
                        scope.errorMessage = "That doesn't look like an image file!";
                        return;
                    }

                    // check if the user has selected an image below our maximum file size of 20MB
                    if (scope.file.size < 20000000) {
                        scope.imageAdded = true;
                    } else {
                        scope.errorMessage = 'Image is too large!';
                        return;
                    }
                }
            }
        };
    }]);

    // A directive to edit the items for showcases
    app.directive('showcaseEditor', function () {
        return {
            restrict: 'E',
            scope: {
                showcaseSummary: '=',
                currentShowcase: '=',
                showcaseItem: '=',
                setShowcaseSummary: '=',
                setCurrentShowcase: '=',
                closeEditor: '='
            },
            controller: 'showcaseEditorController',
            templateUrl: templatePath + 'showcase-editor.html'
        };
    });

    // A directive to display the items within the showcase
    app.directive('showcaseEditorItems', function () {
        return {
            restrict: 'E',
            scope: {
                currentShowcase: '=showcase',
                editorDragOptions: '=dragOptions',
                showcaseEditorFns: '='
            },
            templateUrl: templatePath + 'showcase-editor-items.html'
        };
    });

    // A directive to display an overview of a showcase
    app.directive('showcaseOverview', ['$location', 'showcaseModals', 'showcasesService', 'showcasesDataContext', 'common', function ($location, showcaseModals, showcasesService, showcasesDataContext, common) {
        return {
            restrict: 'E',
            scope: {
                showcase: '=',
                hideOptions: '=',
                allDetails: '=',
                smallThumbnail: '='
            },
            templateUrl: templatePath + 'showcase-overview.html',
            link: function (scope) {
                var getLogFn = common.logger.getLogFn;
                var logSuccess = getLogFn("itemSummary", "success");

                scope.privacyConfirmText = "Are you sure you want to change the privacy setting for this showcase version? Making a showcase a 'Public' showcase means that anyone who has a copy of the link to the showcase will be able to view all its contents. To better control access to your showcase, make the showcase 'Private' (by unchecking the public checkbox) and only invite the people you would like to share it with.";

                // Get the thumbnail for this showcase
                scope.themeThumbnail = showcasesService.getThemeThumbnail(scope.showcase.theme.name);

                // Open the summary and versiom history for a showcase
                scope.showcaseSummary = showcaseModals.summary;

                // Publish the showcase using a modal
                scope.publishShowcase = showcaseModals.publish;

                // Share the showcase using a modal
                scope.shareShowcase = showcaseModals.share;

                // Edit the items for the showcase
                scope.editShowcase = function (showcase, framework) {
                    showcasesService.setCurrentShowcaseId(showcase.showcaseId);
                    $location.path(framework
                        ? "/frameworks?frameworkId=" + showcase.externalFrameworkId
                        : "/stuff"
                    );
                }

                // Customise a showcase using the builder
                scope.customiseShowcase = function (showcase) {
                    $location.path("/showcasebuilder/" + showcase.showcaseId);
                }

                scope.togglePrivacy = function (showcase) {
                    showcase.isPrivate = !showcase.isPrivate;
                    showcasesDataContext.toggleShowcasePrivacy(showcase.showcaseId).then(function () {
                        logSuccess("Showcase version privacy updated");
                    });
                }
            }
        };
    }])

    // A directive to provide controls for the showcase editor
    app.directive('showcaseEditorToolbar', ['$rootScope', 'common', 'showcaseItemsService', 'showcasesDataContext', 'showcaseModals', function showcaseEditorControls($rootScope, common, showcaseItemsService, showcasesDataContext, showcaseModals) {
        return {
            restrict: 'E',
            scope: {
                currentShowcase: '=showcase',
                showcaseAddInItem: '=',
                extraItemsDragOptions: '=dragOptions',
            },
            templateUrl: templatePath + 'showcase-editor-toolbar.html',
            link: link
        };

        function link(scope) {

            var getLogFn = common.logger.getLogFn;
            var logSuccess = getLogFn("itemSummary", "success");

            // Extra items for showcases
            scope.addIns = showcaseItemsService.getAddIns();

            // Share the showcase using a modal
            scope.shareShowcase = function () {
                showcasesDataContext.getShowcase(scope.currentShowcase.id).then(function (showcase) {
                    showcaseModals.share(showcase);
                });
            }

            // Copy the showcase and switch the editor to view it
            scope.copyShowcase = function () {
                showcasesDataContext.cloneShowcase(scope.currentShowcase.id).then(function (copiedShowcase) {
                    logSuccess("Showcase copied!");
                    $rootScope.$broadcast('UpdateShowcases', copiedShowcase.id);
                });
            };

            // Preview the showcase in a new window
            scope.previewShowcase = function () {
                window.open(encodeURI('preview?id=' + scope.currentShowcase.id), '_blank', 'noopener,scrollbars=yes');
            };

            // Delete the showcase
            scope.deleteShowcase = function () {
                showcasesDataContext.deleteShowcase(scope.currentShowcase.id).then(function () {
                    logSuccess("Showcase deleted!");
                    $rootScope.$broadcast('UpdateShowcases');
                });
            };

            // Publish the showcase using a modal
            scope.publishShowcase = function () {
                showcaseModals.publish(scope.currentShowcase);
            }
        }
    }]);


})();