/**
 * Created by NICK on 15/10/13.
 * email:nick121212@126.com
 * qq:289412378
 * copyright NICK
 */

import ref = require('ref');
import _  = require('lodash');


export class SideMenuChildDirective {
    public static _name:string = "sideMenuChild";

    public static directive:Array<any> = ['$rootScope', function ($rootScope) {
        var directive:ng.IDirective = {
            restrict: 'EA',
            require: '^sideMenu',
            link: ($scope, $element, $attrs, $ctrl)=> {
                $scope['showSearchBar'] = false;
                $ctrl['template']($scope, function (clone) {
                    $element.html('').append(clone);
                });
            }
        };

        return directive;
    }];
}

export class SideMenuContentTransclude {
    public static _name:string = "sideMenuContentTransclude";

    public static directive:Array<any> = ['$rootScope', function ($rootScope) {
        var directive:ng.IDirective = {
            link: ($scope, $element, $attrs, $ctrl)=> {
                $scope['$sideMenuTransclude']($scope, function (clone) {
                    $element.empty();
                    $element.append(clone);
                });
            }
        };

        return directive;
    }];
}

export class mdSideMenuSections {
    public static _name:string = "mdSideMenuSections";

    public static provider:Array<any> = [function () {
        var _sections = [],
            _theme,
            _palettes;

        this.initWithSections = function (value) {
            _sections = value ? value : [];
        };

        this.initWithTheme = function (value) {
            _theme = value.theme();
            _palettes = value._PALETTES;
        };

        this.$get = [function () {
            var MdSideMenuSections = function () {
                this.sections = _sections;
                this.selectedNode = null;
                this.options = {};
                this.theme = _theme;
                this.palettes = _palettes;
            };

            return new MdSideMenuSections();
        }];
    }];
}


export class mdStyleDirective {
    public static _name:string = 'mdStyleColor';

    public static directive:Array<any> = ['$rootScope', mdSideMenuSections._name, function ($rootScope, mdSideMenuSections) {
        var directive:ng.IDirective = {
            restrict: 'A',
            scope: {
                mdStyleColor: '='
            },
            link: ($scope, $element, $attrs, $ctrl)=> {
                var themeColors, split, hueR, colorR, colorA, hueA, colorValue,
                    _apply_color = function () {
                        for (var p in $scope.mdStyleColor) {
                            if ($scope.mdStyleColor.hasOwnProperty(p)) {
                                themeColors = mdSideMenuSections.theme.colors,
                                    split = ($scope.mdStyleColor[p] || '').split('.');


                                if (split.length < 2) {
                                    split.unshift('primary');
                                }
                                hueR = split[1] || 'hue-1';
                                colorR = split[0] || 'primary'; // 'warn'

                                // Absolute color: 'orange'
                                colorA = themeColors[colorR] ? themeColors[colorR].name : colorR;
                                // Absolute Hue: '500'
                                hueA = themeColors[colorR] ? (themeColors[colorR].hues[hueR] || hueR) : hueR;
                                colorValue = mdSideMenuSections.palettes[colorA][hueA] ? mdSideMenuSections.palettes[colorA][hueA].value : mdSideMenuSections.palettes[colorA]['500'].value;

                                if (hueA !== '0') {
                                    $element.css(p, 'rgb(' + colorValue.join(',') + ')');
                                } else {
                                    $element.css(p, 'transparent');
                                }
                                // Add color to md-sidenav
                                if ($element.parent().attr('md-component-id')) $element.parent().css(p, 'rgb(' + colorValue.join(',') + ')');
                            }
                        }
                    };

                if (!mdSideMenuSections.theme || !mdSideMenuSections.palettes) {
                    return console.warn('ss-sidenav: you probably want to ssSideNavSectionsProvider.initWithTheme($mdThemingProvider)');
                }

                $scope.$watch('mdStyleColor', function (oldVal, newVal) {
                    if ((oldVal && newVal) && oldVal !== newVal) {
                        _apply_color();
                    }
                });

                _apply_color();
            }
        };

        return directive;
    }];
}

export class mdSideMenuFactory {
    public static _name:string = 'mdSideMenuFactory';

    public static factory = ['$rootScope', mdSideMenuSections._name, function ($rootScope, mdSideMenuSections) {
        var onStateChangeStart = function (event, toState, toParams) {
            var newState = {
                toState: toState,
                toParams: toParams
            };

            function digest(sections, currentSection) {
                sections.forEach(function (section) {
                    if (section[mdSideMenuSections.options.children] && section[mdSideMenuSections.options.children].length) {
                        return digest(section[mdSideMenuSections.options.children], section);
                    }

                    if (section.menuLink == location.hash) {
                        mdSideMenuSections.selectedNode = section;
                    }
                });

                return false;
            }

            digest(mdSideMenuSections.sections, null);
        };

        $rootScope.$on('$locationChangeSuccess', onStateChangeStart);

        return {
            onStateChangeStart: onStateChangeStart
        };
    }];
}

export class SideMenuDirective {
    public static _name:string = "sideMenu";

    public static directive:Array<any> = ['$rootScope', '$compile', mdSideMenuSections._name, function ($rootScope, $compile, mdSideMenuSections) {
        var directive:ng.IDirective = {
            restrict: 'EA',
            replace: false,
            require: 'sideMenu',
            transclude: true,
            scope: {
                modules: '=',
                selectedNodes: '=',
                //opts: '=',
                filterExpression: '=?',
                filterComparator: '=?',
                orderBy: "@",
                reverseOrder: "@"
            },
            controller: ['$scope', '$templateCache', '$interpolate', mdSideMenuFactory._name, function ($scope, $templateCache, $interpolate) {
                var opts = mdSideMenuSections.options;

                $templateCache.put("js/partials/directives/sidemenu.html",
                    "<ul ng-if=\"node.{{opts.children}}.length\">\n" +
                    "    <li ng-if=\"node.menuShow\"\n" +
                    "        ng-repeat=\"node in node.{{opts.children}} | filter:filterExpression:filterComparator {{options.orderBy}}\">\n" +
                    "        <div side-menu-content-transclude ng-click=\"showChildren(node)\"></div>\n" +
                    "        <md-divider ng-if=\"node.depth==1\"></md-divider>\n" +
                    "        <side-menu-child ng-if=\"isShowChildren(node)\" class=\"sidemenu-child am-fade-and-scale\"></side-menu-child>\n" +
                    "    </li>\n" +
                    "</ul>\n" +
                    "<md-divider ng-if=\"!$last && node.depth>1\"></md-divider>\n" +
                    "\n" +
                    "");

                !$scope.selectedNodes && ($scope.selectedNodes = {});
                $scope.showChildren = (node)=> {
                    if ($scope.selectedNodes.hasOwnProperty(node[opts.key])) {
                        delete $scope.selectedNodes[node[opts.key]];
                    } else {
                        if (node[opts.children] && node[opts.children].length) {
                            $scope.selectedNodes[node[opts.key]] = node;
                        }
                    }
                };
                $scope.isShowChildren = function (node) {
                    return $scope.selectedNodes[node[opts.key]];
                };
                $scope.isLeaf = function (node) {
                    return node.rgt - node.lft == 1 || node[opts.children].length == 0;
                };
                $scope.isSelected = function (node) {
                    return !!mdSideMenuSections.selectedNode && mdSideMenuSections.selectedNode[opts.key] == node[opts.key];
                };
                this.template = $compile($interpolate($templateCache.get('js/partials/directives/sidemenu.html'))({
                    opts: opts
                }));
            }],
            compile: ($ele, $attrs, childTranscludeFn)=> {
                return ($scope, $element, attrs, $ctrl)=> {
                    $scope.$watch("modules", function updateNodeOnRootScope(newValue) {
                        var opts = mdSideMenuSections.options;
                        if (angular.isArray(newValue)) {
                            if (angular.isDefined($scope.node) && angular.equals($scope.node[opts.children], newValue))
                                return;
                            $scope.node = {};
                            $scope.node[opts.children] = newValue;
                        }
                        else {
                            if (angular.equals($scope.node, newValue))
                                return;
                            $scope.node = newValue;
                        }
                    });
                    $ctrl.template($scope, function (clone) {
                        $element.html('').append(clone);
                    });
                    $scope.$sideMenuTransclude = childTranscludeFn;
                }
            }
        };

        return directive;
    }];
}