<template>
	<nav
		class="noprint flex flex-row gap-2 mx-1 mt-1 border-b-1 border-gray-800 dark:border-gray-500 bg-indigo-100 dark:bg-gray-800 dark:text-white"
		:class="{ 'fixed z-50 w-full lg:w-screen-xl -top-2 pt-2 border-1': position === NavPosition.header && fixMenu, 'z-1 opacity-20': openMessageBox }"
	>
		<button
			type="button"
			class="flex-none h-6 mt-1 lg:hidden px-2 text-gray-300 hover:text-white focus:outline-none focus:text-white"
			:class="{ 'transition transform-180': isOpen }"
			@click.prevent="isOpen = !isOpen"
		>
			<svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<path
					v-show="isOpen"
					fill-rule="evenodd"
					clip-rule="evenodd"
					d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
				/>
				<path
					v-show="!isOpen"
					fill-rule="evenodd"
					d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
				/>
			</svg>
		</button>
		<div
			class="flex-grow mt-2 text-indigo-800 dark:text-indigo-500 inline-flex gap-2 dark:bg-cool-gray-800 dark:text-white"
		>
			<ul
				:class="isOpen ? '-mt-3 flex flex-col gap-5 bg-gray-300 pr-3 pb-5 dark:bg-gray-700 w-full' : 'hidden lg:flex lg:flex-row'"
			>
				<li
					:class="isOpen ? 'inline-block pt-5' : ''"
					class="nav-item"
					style="margin-top: 0px"
					@click="onHome()"
				>
					<carbon-home />
				</li>
				<li v-if="needSave" class="nav-item mt-2 lg:-mt-1" @click.prevent="onNeedSaveBtn">
					<div class="flex rounded-full px-2 py-1 dark:bg-gray-600 bg-gray-300">
						<div i-carbon-save />
						<span class="ml-1 mt-0.5 text-xs">{{ t('save', 'Save') }}</span>
					</div>
				</li>
				<li
					v-if="currModelid && select_ops && Object.keys(select_ops).length > 0 && (authinfo.viewchange || authinfo.editable)"
					class="nav-item mt-2 lg:-mt-1"
					@click.prevent="onSelectBtn"
				>
					<div class="flex rounded-full px-2 py-1 dark:bg-gray-600 bg-gray-300">
						<div i-carbon-list />
						<span class="ml-1 -mt-0.2 text-xs"> {{currModelid}} </span>
					</div>
				</li>
				<li
					v-if="position === NavPosition.header && data_sections && data_sections.length > 0"
					v-for="(sec) in data_sections"
					:key="sec"
					:id="`nav-${sec}`"
					class="nav-item"
				  :class="{'hidden': dataAuth && !showinfo[`${sec}_itms`]}"
					@click="onNavMenu(`${prefix}-${sec}`)"
				>{{ t(`menu.${sec}`, sec) }}</li>
				<li
					v-if="position === NavPosition.header && showinfo.skills && !show_infopanel"
					id="nav-skills"
					class="nav-item"
					@click="onNavMenu('cv-skills')"
				>{{ t('cv.skills', 'Skills') }}</li>
			</ul>
		</div>
		<div
			class="flex-none text-indigo-800 dark:text-indigo-500 inline-flex gap-2 dark:bg-cool-gray-800 dark:text-white"
			:class="{ 'p-0': fixMenu }"
		>
			<div v-if="canChange || canWrite || isAdmin" class="hidden lg:block border-gray-400 dark:border-gray-600 border-l"/>
			<div v-if="currModelid" class="hidden flex-grow-0">
				<div class="nav-item hover:mt-1 -mt-2 lg:-mt-1 lg:mt-1 flex rounded-full p-1.2 mt-1 border-1 border-gray-500"
					@click.prevent="onSelectBtn">
						<div i-carbon-list />
						<span class="ml-1 text-xs"> {{currModelid}} </span>
				</div>
			</div>
			<div v-if="useEdit || dataAuth && (canWrite || isAdmin)" class="flex-grow-0 icon-btn">
				<div
					class="flex icon-btn nav-item hover:mt-1 my-1.5 px-0.8 pb-0.8 rounded-sm"
					:class="{ 'bg-indigo-700 text-gray-100 hover:text-gray-300 dark:bg-indigo-300 dark:text-gray-700 dark:hover:text-gray-600': authinfo.editable && needSave }"
					@click="onEdit()"
				>
					<carbon-edit />
					<span v-if="authinfo.editable" class="ml-2 mt-1 text-xs">{{ t('edit', 'Edit') }}</span>
				</div>
			</div>
			<div v-if="dataAuth && (canChange || isAdmin)" class="flex-grow-0 icon-btn">
				<div class="flex icon-btn nav-item hover:mt-1 my-1.5" @click="onViewChange()">
					<carbon-erase />
					<span
						v-if="authinfo.viewchange"
						class="ml-2 mt-1 text-xs"
					>{{ t('changeview', 'Change View') }}</span>
				</div>
			</div>
			<div class="hidden lg:block mx-1 border-gray-400 dark:border-gray-600 border-l"/>
			<div v-if="useInfoPanel" class="flex-grow-0 icon-btn ml-3">
				<button class="flex flex-row my-2" @click="onInfoPanel">
					<svg width="1.2em" height="1.2em" class="panel-visibility-toggle">
						<path
							v-if="!show_infopanel"
							class="eye-open"
							d="M8 2.36365C4.36364 2.36365 1.25818 4.62547 0 7.81819C1.25818 11.0109 4.36364 13.2727 8 13.2727C11.6364 13.2727 14.7418 11.0109 16 7.81819C14.7418 4.62547 11.6364 2.36365 8 2.36365ZM8 11.4546C5.99273 11.4546 4.36364 9.82547 4.36364 7.81819C4.36364 5.81092 5.99273 4.18183 8 4.18183C10.0073 4.18183 11.6364 5.81092 11.6364 7.81819C11.6364 9.82547 10.0073 11.4546 8 11.4546ZM8 5.63637C6.79273 5.63637 5.81818 6.61092 5.81818 7.81819C5.81818 9.02547 6.79273 10 8 10C9.20727 10 10.1818 9.02547 10.1818 7.81819C10.1818 6.61092 9.20727 5.63637 8 5.63637Z"
						/>
						<path
							v-else
							class="eye-closed"
							fill-rule="evenodd"
							clip-rule="evenodd"
							d="M14.8222 1.85355C15.0175 1.65829 15.0175 1.34171 14.8222 1.14645C14.627 0.951184 14.3104 0.951184 14.1151 1.14645L12.005 3.25653C10.8901 2.482 9.56509 1.92505 8.06 1.92505C3 1.92505 0 7.92505 0 7.92505C0 7.92505 1.16157 10.2482 3.25823 12.0033L1.19366 14.0679C0.998396 14.2632 0.998396 14.5798 1.19366 14.775C1.38892 14.9703 1.7055 14.9703 1.90076 14.775L14.8222 1.85355ZM4.85879 10.4028L6.29159 8.96998C6.10643 8.66645 6 8.3089 6 7.92505C6 6.81505 6.89 5.92505 8 5.92505C8.38385 5.92505 8.7414 6.03148 9.04493 6.21664L10.4777 4.78384C9.79783 4.24654 8.93821 3.92505 8 3.92505C5.8 3.92505 4 5.72505 4 7.92505C4 8.86326 4.32149 9.72288 4.85879 10.4028ZM11.8644 6.88906L13.8567 4.8968C15.2406 6.40616 16 7.92505 16 7.92505C16 7.92505 13 13.925 8.06 13.925C7.09599 13.925 6.20675 13.7073 5.39878 13.3547L6.96401 11.7895C7.29473 11.8779 7.64207 11.925 8 11.925C10.22 11.925 12 10.145 12 7.92505C12 7.56712 11.9529 7.21978 11.8644 6.88906ZM9.33847 9.41501L9.48996 9.26352C9.44222 9.31669 9.39164 9.36726 9.33847 9.41501Z"
						/>
					</svg>
					<span class="nav-item ml-2">Panel</span>
				</button>
			</div>
			<div class="flex-grow-0 icon-btn">
				<div class="icon-btn nav-item  hover:mt-1 my-1.5"
				:class="{'border-1 p-1 rounded-full mt-0.3 border-gray-900 dark:border-gray-100': fixMenu}" @click="onFixMenu()">
					<div v-if="fixMenu" i-carbon-pin/>
					<div v-else i-carbon-pin-filled />
				</div>
			</div>
			<div class="hidden lg:block mx-1 border-gray-400 dark:border-gray-600 border-l"/>
			<div class="flex-grow-0 icon-btn">
				<button class="nav-item hover:mt-1 my-1.5 !outline-none" @click="toggleDark()">
					<div v-if="isDark" i-carbon-sun />
					<div v-else i-carbon-moon />
				</button>
			</div>
			<div v-if="useLogin" class="nav-item hover:mt-1 my-1.5 !outline-none">
			   <router-link v-if="is_logged_user()" to="Logout">
					<div i-carbon-logout />
				 </router-link>
			   <router-link v-else to="Login">
					<div i-carbon-login />
				 </router-link>
			</div>
			<div class="ml-2 flex-grow-0">
				<MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" @onLocale="onLocale" />
			</div>
		</div>
	</nav>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { NavPosition,ShowInfoType,AuthInfoType } from '~/typs/cv'
import { isDark, toggleDark } from '~/composables'
import MenuLocales  from '@/MenuLocales.vue'
import {LocalesLabelModes}  from '~/typs'
import {is_logged_user} from '~/hooks/utilsAuth'
import useState from '~/hooks/useState'
const props = 
defineProps({
	position: {
		type: String as PropType<NavPosition>,
		default: '',
		required: true,
	},
	fixMenu: {
		type: Boolean,
		default: false,
		required: true,
	},
	show_infopanel: {
		type: Boolean,
		default: false,
		required: true,
	},
	dataAuth: {
		type: Boolean,
		default: true,
		required: false,
	},
	useInfoPanel: {
		type: Boolean,
		default: true,
		required: false,
	},
	useLogin: {
		type: Boolean,
		default: true,
		required: false,
	},
	showinfo: {
		type: Object as PropType<ShowInfoType>,
		default: {},
		required: true,
	},
	authinfo: {
		type: Object as PropType<AuthInfoType>,
		default: { editable: false, viewchange: false, show: true },
		required: true,
	},
	openMessageBox: {
		type: Boolean,
		default: false,
		required: true,
	},
	needSave: {
		type: Boolean,
		default: false,
		required: true,
	},
	useEdit: {
		type: Boolean,
		default: false,
		required: false,
	},
	prefix: {
		type: String,
		default: 'cv',
		required: true,
	},
})
const emit = defineEmits(['onNavMenu'])

const localesLabelMode = ref(LocalesLabelModes.auto)
const includeCurrLocale = true
const t = useI18n().t
const router = useRouter()
const currModelid = useState().current_modelid
const routeKy = router.currentRoute.value.params.ky || router.currentRoute.value.query.k || ''
const isOpen = ref(false)
const onInfoPanel = () => {
	emit('onNavMenu', { src: 'infopanel' })
}
const onFixMenu = () => {
	emit('onNavMenu', { src: 'fixmenu' })
}
const onLocale = (target: string) => {
	emit('onNavMenu',{src: 'locale', target})
}
const isAdmin = computed(() => {
	return routeKy !== '' && useState().showinfo.value.ky === routeKy ? useState().showinfo.value.admin : false
})
const canWrite = computed(() => {
	const val = routeKy !== '' && useState().showinfo.value.ky === routeKy ? useState().showinfo.value.write : false
	//auth_info.value.editable = val
	return val
})
const canChange = computed(() => {
	const val = routeKy !== '' && useState().showinfo.value.ky === routeKy ? useState().showinfo.value.change : false
	//auth_info.value.viewchange = val
	return val
})
const select_ops = useState().selectOps
const data_sections = useState().dataSections
const goToItem = (item: string) => {
	const dom_id = document.getElementById(item)
	if (dom_id) {
		dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
		setTimeout(() => window.scrollBy(0, isOpen.value ? -140 : -40), 4000)
		isOpen.value = false
	}
}
const onNavMenu = (item: string) => {
	let dom_id = document.getElementById(item)
	if (dom_id) {
	  goToItem(item)
	} else {
		const itm = `${item.replace(props.prefix, '')}_itms`
		if (typeof useState().showinfo.value[itm] !== 'undefined') {
			useState().showinfo.value[itm] = useState().showinfo.value[itm] = true
			setTimeout(() => goToItem(item), 1000)
		} else {
		  const rtitm = item.replace(`${props.prefix}-`,'')
			const rt = router.getRoutes().filter(rt => rt.name === rtitm)
			if (rt[0]) {
				router.push(rt[0].path)
			}
		}
	}
}
const onHome = () => {
  router.push(useState().APPHOME.value)
}
const goTopPage = () => {
	const dom_body = document.getElementsByTagName('body')[0]
	if (dom_body) {
		dom_body.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
	}
}
const onEdit = () => {
	emit('onNavMenu', { src: 'editable' })
}
const onViewChange = () => {
	emit('onNavMenu', { src: 'viewchange' })
}
const onSelectBtn = () => {
	goTopPage()
	emit('onNavMenu', { src: 'select' })
}
const onNeedSaveBtn = () => {
	goTopPage()
	emit('onNavMenu', { src: 'save' })
}
</script>