<template>
	<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
		<div class="fixed-header">
			<navbar @setLayout="setLayout" />
			<!-- <tags-view v-if="needTagsView" /> -->
		</div>
		<app-main :class="appMainClassObj" />
		<settings ref="settingRef" />
	</div>
</template>

<script setup>
	import {
		useWindowSize
	} from "@vueuse/core";
	import {
		AppMain,
		Navbar,
		Settings,
		TagsView
	} from "./components";
	import {
		toggleTheme
	} from "@/utils/index";

	const store = useStore();
	const theme = computed(() => store.state.settings.theme);
	const sideTheme = computed(() => store.state.settings.sideTheme);
	const sidebar = computed(() => store.state.app.sidebar);
	const device = computed(() => store.state.app.device);
	const needTagsView = computed(() => store.state.settings.tagsView);
	const fixedHeader = computed(() => store.state.settings.fixedHeader);
	const {
		proxy
	} = getCurrentInstance();
	let timer;

	const classObj = computed(() => ({
		openSidebar: sidebar.value.opened,
		withoutAnimation: sidebar.value.withoutAnimation,
		mobile: device.value === "mobile",
	}));

	const appMainClassObj = computed(() => ({
		// showNavBar: store.state.data.showNavBar,
		showNavBar: true,
	}));

	const {
		width,
		height
	} = useWindowSize();
	const WIDTH = 992; // refer to Bootstrap's responsive design

	watchEffect(() => {
		if (device.value === "mobile" && sidebar.value.opened) {
			// toggleTheme("light");
			store.dispatch("app/closeSideBar", {
				withoutAnimation: false
			});
		}
		if (width.value - 1 < WIDTH) {
			// toggleTheme("dark");
			store.dispatch("app/toggleDevice", "mobile");
			store.dispatch("app/closeSideBar", {
				withoutAnimation: true
			});
		} else {
			toggleTheme("light");
			store.dispatch("app/toggleDevice", "desktop");
		}
	});
	// toggleTheme(store.state.app.device === "mobile" ? "dark" : "light");

	function handleClickOutside() {
		store.dispatch("app/closeSideBar", {
			withoutAnimation: false
		});
	}

	const settingRef = ref(null);

	function setLayout() {
		settingRef.value.openSetting();
	}

	function setDarkTheme() {
		store.dispatch("settings/changeSetting", {
			key: "sideTheme",
			// value: "theme-dark",
			value: store.state.app.device === "mobile" ? "theme-dark" : "theme-light"
		});
		// toggleTheme(store.state.app.device === "mobile" ? "dark" : "light"); //dark
		let messageHello = store.state.app.device === "mobile" ? "晚上好😀，" : "";
		proxy.$modal.notify(
			messageHello + "请注意合理安排休息哦！",
			"晚上好😀",
			"bottom-right"
		);
	}

	let nightTime = proxy.parseTime(
		new Date(),
		`${proxy.parseTime(new Date(), "{y}/{m}/{d}")} 18:00:00`
	);

	let timeToNight = new Date(nightTime) - new Date();

	if (timeToNight < 0) {
		setDarkTheme();
	} else {
		timer = setTimeout(() => {
			setDarkTheme();
		}, timeToNight);
	}
</script>

<style lang="scss" scoped>
	@import "@/assets/styles/mixin.scss";
	@import "@/assets/styles/variables.module.scss";

	.app-wrapper {
		@include clearfix;
		position: relative;
		height: 100%;
		width: 100%;

		&.mobile.openSidebar {
			position: fixed;
			top: 0;
		}
	}

	.drawer-bg {
		background: #000;
		opacity: 0.3;
		width: 100%;
		top: 0;
		height: 100%;
		position: absolute;
		z-index: 999;
	}

	.fixed-header {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9;
		width: 100%;
		transition: width 0.28s;
	}

	.hideSidebar .fixed-header {
		width: calc(100% - 54px);
	}

	.sidebarHide .fixed-header {
		width: 100%;
	}

	.mobile .fixed-header {
		width: 100%;
	}
</style>