<script setup>
import ThemeToggle from './ThemeToggle.vue'

const props = defineProps(['modelValue'])
defineEmits(['update:modelValue'])

async function signout(ev) {
  ev.preventDefault()

  const api_url = '/api/auth'
  const fetch_options = {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json'
    }
  }
  let resp = await fetch(api_url, fetch_options)
  console.log(resp)
  window.location.reload()
}
</script>


<template>
  <nav class="navbar bg-body-tertiary navbar-expand-lg shadow-sm position-relative" aria-label="Chat">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Chat</a>

      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight"
        aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight"
        aria-labelledby="offcanvasNavbarLightLabel">

        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Chat</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>

        <div class="offcanvas-body px-2">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <!--<li v-if="modelValue !== ''" class="nav-item mx-2 mt-2">-->
            <li v-if="modelValue.hasOwnProperty('username')" class="nav-item mx-2 mt-2">
              <button @click="signout" class="btn btn-outline-success">Sign out</button>
            </li>
            <li class="nav-item mf-3 mt-1">
              <div>
                <ThemeToggle />
              </div>
            </li>
          </ul>

        </div>

      </div>
    </div>
  </nav>
</template>

<style scoped>
.fill-height {
  height: 100vh;
}
</style>
