<script setup>
import '@/assets/main.css'
import { userApi } from '@/components/userInfo'
import { useRouter, RouterLink } from 'vue-router'
import DashboardView from './DashboardView.vue'
import AgentManageView from './AgentManageView.vue'
import MessageHistoryView from './MessageHistoryView.vue'
import { computed } from 'vue'

const props = defineProps({
  contentId: { type: String, default: 'dashboard-view' },
})

const router = useRouter()

async function logout() {
  let result = await userApi.logoutProcess()
  if (result) {
    router.push('/login.html')
  }
}

const currentContent = computed(() => {
  if (props.contentId == 'dashboard-view') {
    return DashboardView
  } else if (props.contentId == 'agent-manage-view') {
    return AgentManageView
  } else if (props.contentId == 'message-history-view') {
    return MessageHistoryView
  } else {
    return DashboardView
  }
})
</script>

<template>
  <header class="dfx-top-title-bar p-2 d-flex align-items-center w-100 top-0 start-0 text-white bg-purple rounded shadow-sm" style="min-width: 100%">
    <h3 class="flex-grow-1">DFX Console</h3>
    <nav class="navbar navbar-expand-lg p-0">
      <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle p-0" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-person-gear" style="font-size: 2rem"></i> </a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" style="cursor: pointer" @click="logout"><i class="bi bi-box-arrow-right"></i> Log out</a>
                </li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" style="cursor: pointer">Something else here</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <div class="container p-0 d-flex">
    <aside class="dfx-left-side d-flex flex-column flex-shrink-0 p-3 bg-body-secondary">
      <div><i class="bi bi-laptop" style="font-size: 2rem"></i></div>
      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
          <RouterLink to="/main.html" class="nav-link" :class="{ active: props.contentId == 'dashboard-view', 'link-body-emphasis': props.contentId == 'dashboard-view' }" aria-current="page"> <i class="bi bi-cast" style="font-size: 1.1rem; padding-right: 0.5rem"></i> Dashboard </RouterLink>
        </li>
        <li>
          <RouterLink to="/agent-manage.html" class="nav-link" :class="{ active: props.contentId == 'agent-manage-view', 'link-body-emphasis': props.contentId != 'agent-manage-view' }" aria-current="page"> <i class="bi bi-cpu" style="font-size: 1.1rem; padding-right: 0.5rem"></i> Agents </RouterLink>
        </li>
        <li>
          <RouterLink to="/message-history.html" class="nav-link" :class="{ active: props.contentId == 'message-history-view', 'link-body-emphasis': props.contentId != 'message-history-view' }" aria-current="page"> <i class="bi bi-card-checklist" style="font-size: 1.1rem; padding-right: 0.5rem"></i> Messages </RouterLink>
        </li>
      </ul>
    </aside>
    <!-- main content - dashboard, agent list, history -->
    <component :is="currentContent"></component>
  </div>
</template>

<style></style>
