(function () {
    'use strict';
    var app = angular.module('app');
    var siteSpecificTemplatePath = '/app/Layout/Views/';
    var sharedTemplatePath = modulesSharedResourcesUrl + 'Layout/Views/';
    var stylesPath = modulesSharedResourcesUrl + "Layout/Styles/";

    // Directives for app branding
    app.directive('appBrandingStyles', ['tinycolor', function (tinycolor) {
        return {
            restrict: 'E',
            scope: {
                branding: '='
            },
            templateUrl: stylesPath + 'styles.html',
            link: function (scope) {

                scope.$watch('branding', function () {

                    if (!scope.branding.secondaryColourText) {
                        scope.branding.secondaryColourText = "#fff";
                    }

                    scope.successButtonBoxShadowColour = tinycolor(scope.branding.secondaryColour).lighten(15).desaturate(20).toHexString();
                    scope.successButtonBorderColour = tinycolor(scope.branding.secondaryColour).lighten(30).toHexString();

                    scope.sidebarGroupSelectedBgColour = tinycolor(
                        scope.branding.headerStyle == "standard"
                            ? scope.branding.primaryColour
                            : '#ffffff'
                    ).darken(5).toHexString();

                    scope.sidebarLinkHoverColour = (
                        tinycolor(scope.sidebarGroupSelectedBgColour).getBrightness() > 128
                            ? tinycolor(scope.branding.textColour).darken(50)
                            : tinycolor(scope.branding.textColour).lighten(50)
                    ).toHexString();

                }, true);
            }
        }
    }]);

    app.directive('appBranding', ['config', function (config) {
        return {
            restrict: 'E',
            require: ['?disableFocus'],
            templateUrl: sharedTemplatePath + "app-branding.html",
            link: function (scope, _e, _a, disableFocus) {

                scope.enableLink = config.enableWorkflows;
                scope.disableFocus = disableFocus;
            }
        };
    }]);

    app.directive('disableFocus', function () {
        return {
            restrict: 'A'
        }
    });

    // Directive for the sidebar
    app.directive('appNavigation', function () {
        return {
            restrict: 'E',
            templateUrl: sharedTemplatePath + "app-navigation.html",
            controller: 'appNavController as nav'
        };
    });

    // Directive for the main app header
    app.directive('appHeader', function () {
        return {
            restrict: 'E',
            templateUrl: sharedTemplatePath + "app-header.html"
        };
    });

    // Directive for the navigation sidebar
    app.directive('sidebarNav', function () {
        return {
            restrict: 'E',
            templateUrl: sharedTemplatePath + "sidebar-nav.html",
            link: function (scope, _e, _a, focusWithin) {

                scope.focusWithin = focusWithin;
            }
        };
    });

    // Directive for site-specific sidebar contents
    app.directive('sidebarContents', ['$location', function ($location) {
        return {
            restrict: 'E',
            require: '^^focusWithin',
            scope: {
                links: '=',
                sidebarExpanded: '=',
                highlightRoute: '=',
                highlightSubRoute: '=',
                openSubMenu: '=',
                toggleSubMenu: '=',
                showHelpText: '=',
            },
            templateUrl: sharedTemplatePath + "sidebar-contents.html",
            link: function (scope, _e, _a, focusWithin) {

                scope.focusWithin = focusWithin;

                scope.$watch('links', function () {
                    if (scope.links) {
                        var activeSubLink = scope.links.find(function (link) {
                            return link.routes && link.routes.find(function (subLink) {
                                return subLink.route == $location.$$path;
                            });
                        });

                        if (activeSubLink) {
                            scope.openSubMenu = activeSubLink.title;
                        }
                    }
                });
            }
        };
    }]);

    // Directive for navigation sidebar popovers
    app.directive('sidebarNavPopover', function () {
        return {
            restrict: 'A',
            link: function (scope, elem) {

                var mainNav = $('nav#mainnav');

                // Have to wait until angular puts the right class on for list popovers
                setTimeout(function () {
                    adjustPopoverHeight();
                }, 10);

                mainNav.scroll(function () {
                    adjustPopoverHeight();
                })

                // Adjust the height of popovers when scrolling
                // fixes the issue that popovers nested within the navbar don't show because of auto overflow
                function adjustPopoverHeight() {
                    var scrollTop = mainNav.scrollTop();
                    elem.css({ marginTop: '' });
                    console.log(elem.css('marginTop'));
                    elem.css({ marginTop: parseInt(elem.css('marginTop')) - scrollTop });
                }
            }
        };
    });

    // Directive for site-specific header contents
    app.directive('headerContents', function () {
        return {
            restrict: 'E',
            templateUrl: siteSpecificTemplatePath + "header-contents.html",
            transclude: true
        };
    });

    // Directive for site-specific user settings
    app.directive('userSettingsSidebar', function () {
        return {
            restrict: 'E',
            templateUrl: siteSpecificTemplatePath + "user-settings-sidebar.html",
            transclude: true
        }
    });

    // Directive for the notifications dropdown
    app.directive('notificationsDropdown', function () {
        return {
            restrict: 'E',
            templateUrl: sharedTemplatePath + "Dropdowns/notifications.html"
        };
    });

    // Directive for the activities dropdown
    app.directive('activitiesDropdown', function () {
        return {
            restrict: 'E',
            templateUrl: sharedTemplatePath + "Dropdowns/activities.html"
        };
    });

    // Directive for the user roles dropdown
    app.directive('userRolesDropdown', function () {
        return {
            restrict: 'E',
            templateUrl: sharedTemplatePath + "Dropdowns/user-roles.html"
        };
    });

    // Directive for the products dropdown
    app.directive('productsDropdown', function () {
        return {
            restrict: 'E',
            templateUrl: sharedTemplatePath + "Dropdowns/products.html"
        };
    });

    // Directive for the loader
    app.directive('loadingSpinner', function () {
        return {
            restrict: 'E',
            scope: {
                loaded: '='
            },
            template: '<div ng-hide="loaded" class="loader">Loading...</div>'
        }
    });

    // Focus-within directive
    // The :focus-within selector doesn't work on ie11, so this is a workaround
    app.directive('focusWithin', function () {
        return {
            restrict: 'A',
            controller: ['$scope', function ($scope) {

                // Whether an element within the directive focused
                $scope.isFocused = false;

                // Change the focus
                this.setFocus = function () {
                    $scope.isFocused = true;
                };
                this.setUnFocus = function () {
                    $scope.isFocused = false;
                };
            }],
            link: function (scope, elem) {

                scope.$watch('isFocused', setFocusClass);

                // Set the focus class when the isFocused value changes
                function setFocusClass() {
                    elem[scope.isFocused ? "addClass" : "removeClass"]('focus-within');
                }
            }
        }
    });

})();