Vue.component('main-menu-item',
	{
		props: ['menuitem'],
		template: '' +
			'<li v-if="menuitem.SubItems == null" class="nav-item">' +
			'	<a class="nav-link" v-bind:href="menuitem.Link">{{menuitem.Name}}</a>' +
			'</li> '+
			'<li v-else-if="menuitem.SubItems != null"  class="nav-item dropdown">  ' +
			'	<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{{menuitem.Name}}</a> ' +
			'		<div class="dropdown-menu"> ' +
			'			<a  v-for="item in menuitem.SubItems" class="dropdown-item" v-bind:href="item.Link">{{item.Name}}</a> ' +
			'		</div> ' +
			'</li>'
	});

Vue.component('main-menu-search',
	{
		props: ['searchSettings'],
		template: ''+
			'<form v-if="searchSettings != null" class="form-inline"  v-bind:action="searchSettings.SearchUrl" v-bind:method="searchSettings.SearchMethod" >' +
			'	<div class="input-group">' +
			'		<input class="form-control mr-sm-0 " type="search" name="SearchText" placeholder="Search" aria-label="Search">' +
			'		<div class="input-group-append">' +
			'			<button class="btn btn-success" type="submit">' +
			'				<i class="fa fa-search pull-left button-icon" aria-hidden="true"></i>' +
			'				<span class="d-sm-none d-xl-inline">Search</span>' +
			'			</button>' +
			'		</div>' +
			'	</div>' +
			'</form>'
		});


Vue.component('main-menu-apps-item',
	{
		props: ['appItem'],
		computed: {
			IconClasses: function () {
				var result = "fa fa-" + this.appItem.IconName + " fa-4x";
				return result;
			}
		},
		template: '' +
			'<div  class="border rounded m-1 p-1 border-light">' +
			'	<a :href="appItem.Link">' +
			'		<i :class="IconClasses" aria-hidden="true"></i>' +
			'		{{appItem.Name}}' +
			'	</a>' +
			'</div>'
	});

Vue.component('main-menu-apps',
	{
		props: ['apps'],
		template: '' +
			'<ul class="nav navbar-nav navbar-right"> ' +
			'	<li class="nav-item dropdown">' +
			'		<a class="nav-link btn-lg btn-outline" href="#" id="appswitcherdrop" data-toggle="dropdown">' +
			'			<i class="fa fa-th fa-2x pull-left button-icon" aria-hidden="true"></i>' +
			'		</a>'+
		'			<div class="dropdown-menu dropdown-menu-right shadow-lg p-4 bg-white rounded " id="appswitchermenu">'+
			'			<main-menu-apps-item  v-for="item in apps"  v-bind:app-item="item" v-bind:key="item.Name"></main-menu-apps-item>' +
			'		</div>' +
			'	</li>' +
			'</ul>'
	});

Vue.component('main-menu-user-menu-item',
	{
		props: ['item'],
		template: '' +
			'<a v-if="!item.IsDivider" class="dropdown-item" :href="item.Link">{{item.Name}}</a>' +
			'<div v-else-if="item.IsDivider" class="dropdown-divider"></div>'
	});

Vue.component('main-menu-user-menu',
	{
		props: ['usermenu','user'],
		template: '' +
			'<div> ' +
			'	<ul class= "nav navbar-nav navbar-right" >' +
			'		<li class="nav-item dropdown">' +
			'			<a class="nav-link dropdown-toggle" href="#" id="userdropdown" data-toggle="dropdown">' +
			'				<span class="d-sm-none d-xl-inline">{{user.Name}}</span>' +
			'				<span class="d-xl-none d-sm-inline">{{user.ShortName}}</span>' +
			'			</a>' +
			'			<div class="dropdown-menu dropdown-menu-right">' +
			'				<main-menu-user-menu-item  v-for="useritem in usermenu" :item="useritem"  ></main-menu-user-menu-item >' +
			'			</div>' +
			'		</li>' +
			'	</ul>' +
			'</div>'
	
		});



Vue.component('yoyo-header',
	{
		methods: {
			handleScroll(event) {

				var currentScrollPos = window.pageYOffset;
				if (this.prevScrollpos > currentScrollPos) {

					this.styletop= "0";
				} else {
					this.styletop= "-85px";
				}
				this.prevScrollpos = currentScrollPos;
			}
		},
		created() {
			window.addEventListener('scroll', this.handleScroll);
		},
		destroyed() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		data: function () {
			return {
				prevScrollpos: 0,
				styletop: "-85px;"
			}
		},
		props: {
			headerData: {type:Object, required:true}
		},
		template: '' +
			'<nav id="navbar" class="navbar navbar-expand-sm border-bottom box-shadow" v-bind:style="{ top: styletop }">' +
			'	<div id="headerlogosmall" class="d-xl-none">' +
			'		<a href = "/" class="navbar-brand" ></a > ' +
			'	</div > ' +
			'	<a href="/" class="navbar-brand d-none d-xl-table-cell"> ' +
			'		<img src="https://www.yoyoglobal.com/wp-content/uploads/yoyo-global-freight.png"> ' +
			'	</a> ' +
			'	<ul class="navbar-nav mr-auto"> ' +
			'		<main-menu-item v-for="item in headerData.MainMenu" v-bind:menuitem="item" v-bind:key="item.link"></main-menu-item> ' +
			'	</ul> ' +
			'	<main-menu-search v-bind:search-settings="headerData.Search"></main-menu-search>' +
			'	<main-menu-apps v-if="headerData.AppSwitcherMenu != null" v-bind:apps="headerData.AppSwitcherMenu"></main-menu-apps>' +
			'	<div>' +
			'		<div>' +
			'			<small id="environmentheader">{{headerData.EnvironmentHeader}}</small>' +
			'		</div>' +
			'		<main-menu-user-menu v-if="headerData.UserMenu != null" :usermenu="headerData.UserMenu"  :user="headerData.User"></main-menu-user-menu>' +
			'	</div>' +
			'</nav>'
	});