<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute, RouterView } from 'vue-router';
import { clearToken, setSessionAuth } from './utils/auth';
import { userInfoStore } from './store/UserInfo'

const router = useRouter();
const route = useRoute();
const userInfo = userInfoStore()

const handleNavClick = (path: string) => {
  router.push(path);
}

const mainContent = ref<HTMLElement | null>(null)
router.afterEach(() => {
  if (mainContent.value) {
    mainContent.value.scrollTop = 0
  }
})

const LogOut = async () => {
  router.push('/login');
  clearToken();
  setSessionAuth(false);
  await userInfo.clearUserInfo()
}

const hideHeader = computed(() => route.name === 'login' || route.name === 'register')
</script>

<template>
  <el-container class="app">
    <el-header v-if="!hideHeader" class="header">
      <div class="navbar" :router="true">
        <div @click="handleNavClick('/')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-home"></use>
          </svg>Home
        </div>
        <div @click="handleNavClick('/seasons')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-milestone"></use>
          </svg>Seasons
        </div>
        <div @click="handleNavClick('/teams')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-car"></use>
          </svg>Teams
        </div>
        <div @click="handleNavClick('/drivers')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-driver"></use>
          </svg>Drivers
        </div>
      </div>
      <div class="logo">
        <!-- <span>
          <img src="@/assets/logo.webp" alt="logo">
        </span> -->
        <el-avatar :size="32" class="avatar">{{ userInfo.userInfo.username?.[0] || '?' }}</el-avatar>
        <el-button type="primary" @click="LogOut()" class="logOut">LogOut</el-button>
      </div>
    </el-header>
    <el-main :class="hideHeader ? 'main-no-header' : 'main'" ref="mainContent">
      <RouterView />
    </el-main>
  </el-container>
</template>

<style scoped>
.app {
  height: 100vh;
  overflow: hidden;
}

.header {
  height: 90px;
  background: linear-gradient(90deg, #f00f0f 0%, #ee8d11 25%, #c026d9 50%, #294fd6 75%, #2fd03f 100%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.navbar div {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  padding: 0 30px;
}

.navbar div:hover {
  cursor: pointer;
  background-color: rgb(198, 230, 239, 0.3);
  border-radius: 10px;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.main {
  margin-top: 90px;
  padding: 0;
  background-image: url('@/assets/far.jpg');
  background-size: cover;
  height: calc(100vh - 90px);
  &>*{
    backdrop-filter: blur(10px);
  }
}

.main-no-header {
  margin-top: 0;
  padding: 0;
}

.avatar {
  margin: auto 0;
}

.logOut {
  margin: auto 0;
  margin-left: 10px;
  background-color: red;
}
</style>
