<template>
  <nav class="top-bar">
      <v-app-bar app fixed color="white">
          <img src="../assets/new_logo.png" width="100px">
          <v-spacer></v-spacer>
          <v-btn icon @click="openConversations" :class="{ 'unreadMessages': unread_messages }">
            <v-icon>mdi-message</v-icon>
          </v-btn>
          <v-btn icon @click="toggleDrawer" class="ml-2">
          <v-icon>mdi-menu</v-icon>
          </v-btn>
      </v-app-bar>
      <v-navigation-drawer v-model="drawer" app right>
          <v-list>
              <v-list-item @click="openProfile">
                  <v-list-item-icon>
                      <v-icon>mdi-account</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                      <v-list-item-title>My Profile</v-list-item-title>
                  </v-list-item-content>
              </v-list-item>
              <v-list-item @click="openUserSettings">
                  <v-list-item-icon>
                      <v-icon>mdi-cog</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                      <v-list-item-title>Settings</v-list-item-title>
                  </v-list-item-content>
              </v-list-item>
              <v-list-item>
                  <v-list-item-icon>
                      <v-icon>mdi-account</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title><a href="https://billing.stripe.com/p/login/7sI3ct4zoceDcec8ww" target="_blank" style="color:inherit; text-decoration:none;">Subscription</a></v-list-item-title>
                  </v-list-item-content>
              </v-list-item>
              <v-list-item  @click="logout()">
                  <v-list-item-icon>
                      <v-icon>mdi-logout</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                      <v-list-item-title>Logout</v-list-item-title>
                  </v-list-item-content>
              </v-list-item>
          </v-list>
      </v-navigation-drawer>
  </nav>
</template>


  
  <script>
  import axios from 'axios';
  import router from '@/router';
  export default {
    props:{
      'unread_messages': Boolean
    },
    name: 'loginHeader',
    data() {
      return {
        drawer: false,
      };
    },
    methods: {
      openUserSettings() {
      this.$emit('open-user-settings');
    },
    openProfile() {
      this.$emit('open-user-profile');
    },
    openConversations() {
      this.$emit('open-conversations');
    },
    toggleDrawer() {
        this.drawer = !this.drawer;
      },
      async logout() {
            const response = await axios.get(this.APIEndPoint + 'users.php?logout=true', { withCredentials: true });
            localStorage.clear();
            sessionStorage.clear();
            window.location = 'https://stellaamor.com/signin'
            window.location.reload();
        },
    },
    created(){
      this.APIEndPoint = this.$hostname;
    }
  };
  </script>
  