/// <reference path="../../includes.ts" />

module app {

    class NavController {
        public static $inject = ["$scope", "$rootScope"];
        public $onInit: Function;
        public $onChanges: Function;
        public open: boolean = false;

        public links: any[] = [
            {value: '#/sports', label: 'Dashboard', key:  'dashboard'},
            {value: '#/sports/training', label: 'Training Program', key: 'training'},
            {value: '#/sports/results', label: 'Results', key: 'results'},
            {value: '#/sports/science', label: 'Science', key: 'science'}
        ];

        constructor(
            private $scope:any,
            private $rootScope: any) {
            this.$onInit = () => {

                $scope.$on('tabsOpen', (ev: any, val: any) => {
                    if (val !== 'reportnav') {
                        this.open = false;
                    }
                })
            };

            this.$onChanges = (values: any) => {
            };
        }

        toggleTabs() {
            this.open = !this.open;
            if (this.open) {
                this.$rootScope.$broadcast('tabsOpen', 'reportnav');
            }
        }
    }

    class Nav {
        public bindings: any = {
            selectedValue: '<',
        };
        public template: string = `
            <div class="pageNav">
                <div class="menu" ng-click="vm.toggleTabs()"><div class="chevron" ng-class="{open: vm.open}"></div></div>
                <div class="links" ng-class="{open: vm.open}">
                    <a ng-repeat="link in vm.links" href="{{link.value}}" ng-class="{selected: link.key === vm.selectedValue}">{{link.label}}</a>
                </div>
            </div>
        `;
        public controller: any = NavController;
        public controllerAs: string = 'vm';

        constructor() {
        }

    }


    angular.module('app').component('sportsNav', new Nav());
};