<template>
  <div>
    <v-app-bar>
      <!-- Slot prepend -->
      <template v-slot:prepend>
        <v-app-bar-nav-icon variant="text" @click.stop="toggleDrawer"></v-app-bar-nav-icon>
      </template>

      <v-app-bar-title>WESTONE</v-app-bar-title>

      <!-- Slot append -->
      <template v-slot:append>
        <v-menu v-model="menu" location="top start" origin="top start" transition="scale-transition">
          <template v-slot:activator="{ props }">
            <v-chip v-bind="props" class="ma-2" variant="text">
              <v-icon icon="mdi-account-circle-outline" start></v-icon>
              John Leider
            </v-chip>
          </template>

          <v-card width="300">
            <v-list bg-color="black">
              <v-list-item>
                <template v-slot:prepend>
                  <v-avatar image="https://cdn.vuetifyjs.com/images/john.png"></v-avatar>
                </template>

                <v-list-item-title>John Leider</v-list-item-title>

                <v-list-item-subtitle>john@google.com</v-list-item-subtitle>

                <template v-slot:append>
                  <v-list-item-action>
                    <v-btn variant="text" icon @click="menu = false">
                      <v-icon>mdi-close-circle</v-icon>
                    </v-btn>
                  </v-list-item-action>
                </template>
              </v-list-item>
            </v-list>

            <v-list>
              <v-list-item prepend-icon="mdi-briefcase" link>
                <v-list-item-subtitle>john@gmail.com</v-list-item-subtitle>
              </v-list-item>
            </v-list>
          </v-card>
        </v-menu>

       
        <v-divider class="mx-2 " vertical></v-divider>
        <v-menu :close-on-content-click="false" location="center">
          <template v-slot:activator="{ props }">
            <v-btn variant="tonal"  append-icon="mdi-open-in-new" class="text-none text-subtitle-1 ma-2" color="primary" flat small v-bind="props">
              Quick Menu
            </v-btn>
          </template>
          <v-card min-width="200" class="mx-auto">
            <v-list density="compact" nav>
              <v-list-subheader
                class="font-bold text-high-emphasis text-uppercase font-weight-black">REPORTS</v-list-subheader>

              <v-list-item v-for="(item, i) in items" :key="i" :value="item" color="primary">
                <template v-slot:prepend>
                  <v-icon :icon="item.icon"></v-icon>
                </template>

                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item>
            </v-list>
          </v-card>

        </v-menu>
      </template>
    </v-app-bar>


    <!-- Bind v-model ke drawer dari Vuex -->
    <v-navigation-drawer temporary v-model="drawer">
      <v-list :lines="false" density="compact" nav>
        <v-list-group active-color="primary" value="Admin">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props" title="Admin" prepend-icon="mdi-account-multiple-outline"></v-list-item>
          </template>

          <v-list-item v-for="([title], i) in admins" :key="i" :title="title" :value="title"></v-list-item>
        </v-list-group>
      </v-list>

    </v-navigation-drawer>

  </div>
</template>
<script setup>
import { ref } from 'vue'

const menu = ref(false)
const items = [
  { text: 'Real-Time', icon: 'mdi-clock' },
  { text: 'Audience', icon: 'mdi-account' },
  { text: 'Conversions', icon: 'mdi-flag' },
]
</script>
<script type="module">
import MenuComponent from "./one-menu.vue";
import QuickMenu from "./quick-menu.vue";

export default {
  name: "NavbarComponent",
  components: {
    "one-menu": MenuComponent,
    "quick-menu": QuickMenu,
  },
  data() {
    return {
      drawer: false,
      isUsersOpen: true,
      admins: [
        ['Management', 'mdi-account-multiple-outline'],
        ['Settings', 'mdi-cog-outline'],
      ],

    };
  },
  computed: {
    // Akses state dari Vuex
    bread_crumb() {
      return this.$store.state.system.bread_crumb;
    },
    count() {
      return this.$store.state.coba2.count;
    },
    email() {
      return this.$store.state.coba2.email;
    },
  },
  methods: {
    // Dispatch action ke store
    increment() {
      this.$store.dispatch("increment");
    },
    toggleDrawer() {
      this.drawer = !this.drawer;
      console.log(this.drawer)
    },
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
