<template>
    <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
        <module-tabs class="module-tabs-bar" />
        <div class="app-body">
            <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
            <side-bar v-if="!sidebar.hide" class="sidebar-container" />
            <div :class="{ sidebarHide: sidebar.hide }" class="main-container">
                <app-main />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import SideBar from './components/Sidebar/index.vue'
import ModuleTabs from './components/ModuleTabs.vue'
import { AppMain } from './components'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePortalMenuStore from '@/store/modules/portalMenu'

const appStore = useAppStore()
const portalMenuStore = usePortalMenuStore()
const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme)
const sidebar = computed(() => appStore.sidebar)
const device = computed(() => appStore.device)

const classObj = computed(() => ({
    hideSidebar: !sidebar.value.opened,
    openSidebar: sidebar.value.opened,
    withoutAnimation: sidebar.value.withoutAnimation,
    mobile: device.value === 'mobile'
}))

const { width } = useWindowSize()
const WIDTH = 992

watchEffect(() => {
    if (device.value === 'mobile' && sidebar.value.opened) {
        appStore.closeSideBar({ withoutAnimation: false })
    }
    if (width.value - 1 < WIDTH) {
        appStore.toggleDevice('mobile')
        appStore.closeSideBar({ withoutAnimation: true })
    } else {
        appStore.toggleDevice('desktop')
    }
})

onMounted(() => {
    if (!portalMenuStore.loaded) {
        portalMenuStore.loadPortalMenus()
    }
})

const handleClickOutside = () => {
    appStore.closeSideBar({ withoutAnimation: false })
}
</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%;
	display: flex;
	flex-direction: column;

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

.module-tabs-bar {
	flex: 0 0 50px;
	height: 50px;
	width: 100%;
	z-index: 1001;
}

.app-body {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	width: 100%;
	min-height: 0;
}

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

</style>
