<template>
	<div>
		<!-- App bar -->
		<v-app-bar
			app
			height="60"
			flat
			color="secondary"
			class="elevation-1"
		>   
			<template v-if="!isOpen">
				<v-app-bar-nav-icon @click="isOpen=!isOpen"></v-app-bar-nav-icon>
				<v-toolbar-title>
					<!-- <v-icon color="primary">mdi-hexagon-multiple</v-icon> -->
					<span class="font-weight-bold" style="letter-spacing: 2px; font-size: large;">{{ title }}</span>
				</v-toolbar-title>
			</template>
			<v-spacer></v-spacer>
			<div>
				<v-menu
					v-model="menu"
					left bottom nudge-bottom="25"
					max-width="300px" min-width="250px"
					:close-on-content-click="false"
				>
					<template #activator="{ on, attrs }">
						<div v-bind="attrs" class="no-highlight" v-on="on">
							<v-avatar color="info" size="30" class="text-capitalize accent-3 title white--text">
								<span v-if="$auth.user().full_name" style="font-size: 15px">{{ $auth.user().full_name[0] }}</span>
							</v-avatar>
							<v-icon size="20">mdi-chevron-down</v-icon>
						</div>
					</template>
					<v-list class="pt-0" dense>
						<v-list-item>
							<v-row 
								dense class="py-4" 
								justify="start" align="center"
							>
								<v-col cols="auto">
									<v-avatar color="info" size="45" class="text-capitalize accent-3 mx-1 title white--text">
										<span v-if="$auth.user().full_name" style="font-size: 23px">{{ $auth.user().full_name[0] }}</span>
									</v-avatar>
								</v-col>
								<v-col cols="8" class="text-left">
									<div class="body-2 no-word-wrap">{{ $auth.user().full_name }}</div>
									<div>
										<div class="grey--text caption">{{ $auth.user().email || 'N/A' }}</div>
									</div>
								</v-col>
							</v-row>
						</v-list-item>
						<v-divider></v-divider>
						<v-subheader>Options</v-subheader>
						<v-list-item @click="toggleDarkMode()">
							<v-list-item-icon class="mr-2">
								<v-icon size="16" class="">{{ $vuetify.theme.dark ? "mdi-moon-waxing-crescent" : "mdi-white-balance-sunny" }}</v-icon>
							</v-list-item-icon>
							<v-list-item-content class="body-2">
								Appearance: {{ $vuetify.theme.dark ? 'Dark' : 'Light' }}
							</v-list-item-content>
						</v-list-item>
						<v-list-item @click="toUseProfile()">
							<v-list-item-icon class="mr-2">
								<v-icon size="16">mdi-card-account-details</v-icon>
							</v-list-item-icon>
							<v-list-item-content class="body-2">Manage Your Account</v-list-item-content>
						</v-list-item>
						<v-list-item @click="logout()">
							<v-list-item-icon class="mr-2">
								<v-icon size="16" class="error--text">mdi-logout</v-icon>
							</v-list-item-icon>
							<v-list-item-content class="error--text body-2">Log Out</v-list-item-content>
						</v-list-item>
					</v-list>
				</v-menu>
			</div>
		</v-app-bar>

		<!-- Side bar -->
		<v-navigation-drawer
			v-model="isOpen"
			app
			temporary
			floating
			color="secondary"
			class="elevation-1"
		>   
			<v-row class="ma-0" align="center">
				<v-col cols="auto">
					<v-app-bar-nav-icon @click="isOpen=!isOpen"></v-app-bar-nav-icon>
				</v-col>
				<v-col class="text-center">
					<!-- <v-icon color="primary">mdi-hexagon-multiple</v-icon> -->
					<span class="font-weight-bold" style="letter-spacing: 2px; font-size: large;">{{ title }}</span>
				</v-col>
				<v-spacer></v-spacer>
			</v-row>
			<v-divider></v-divider>
			<v-list
				v-for="(group,i) in route_groups" 
				:key="i"
				dense flat
				class="py-0"
			>
				<v-subheader v-if="group.title!=null">
					{{ group.title }}
				</v-subheader>
				<template v-for="item in group.routes">
					<template v-if="item.sub">
						<v-list-group
							:key="item.title"
							v-model="item.test"
							:group="item.namespace"
							:prepend-icon="item.icon"
							append-icon="mdi-menu-down"
							color="primary"
							no-action
						>
							<template #activator>
								<v-list-item-content>
									<v-list-item-title>{{ item.title }}</v-list-item-title>
								</v-list-item-content>
							</template>
							<v-list-item v-for="child in item.sub" :key="child.title" :to="child.route"> 
								<v-list-item-title>{{ child.title }}</v-list-item-title>
							</v-list-item>
						</v-list-group>
					</template>

					<v-list-item
						v-else 
						:key="item.title" 
						:to="item.route" 
						color="primary"
					>
						<v-list-item-icon><v-icon>{{ item.icon }}</v-icon></v-list-item-icon>
						<v-list-item-title>{{ item.title }}</v-list-item-title>
					</v-list-item>
				</template>
			</v-list>
			<template #append>
				<div 
					class="pa-4 x-caption text-center"
					style="width: 100%"
				>
					<a href="https://advisoryapps.com" class="text-decoration-none opposite--text">Powered by <strong>AdvisoryApps</strong></a>
				</div>
			</template>
		</v-navigation-drawer>
	</div>
</template>

<script>
import navi from '@/js/configs/navbar'
export default {
	data () {
		return {
			title : process.env.MIX_APP_NAME,
			navIndex: null,
			isOpen: false,
			menu: false,
			route_groups: [],
		}
	},
	// watch:{
	// 	$route (to, from){
	// 		console.log(to,from)
	// 	}
	// },
	created(){
		this.getNavRoute()
	},
	methods: {
		getNavRoute(){
			let navi_key = 'admin'
			if(this.$auth.user().role_id == 2) {
				navi_key = 'partner'
			}
			this.route_groups = navi.navbar_path[navi_key]
		},
		toggleDarkMode() {
			this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
			localStorage.setItem("dark-theme", this.$vuetify.theme.dark);
		},
		toUseProfile(){
			this.menu = false
			this.$router.push('/my/profile');
		},
		logout(){
			this.$auth.logout({
				makeRequest: true,
				data: {},
				redirect: '/login',
				// etc...
			});
		},
	}
}
</script>