<script setup lang="ts">
import { reactive } from "vue";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();

let lang = reactive([
  { title: "English", text: "en" },
  { title: "中文", text: "zh" },
]);

let menu = reactive([
  { title: "login", link: "/login" },
  { title: "register", link: "/signup" },
]);

function setLang(lang: String) {
  locale.value = `${lang}`;
  localStorage.setItem("lang", `${lang}`);
}
</script>

<template>
  <v-app-bar prominent class="px-3 navbar">
    <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
    <v-toolbar-title>
      <a href="https://ai.choozmo.com/ai-presenter/info/">
        <img src="../assets/img/Choozmo-logo.png" alt="" class="logo" />
      </a>
    </v-toolbar-title>

    <v-spacer></v-spacer>

    <v-toolbar-items>
      <v-btn v-for="item in menu" :to="item.link" color="gray">
        {{ t(`${item.title}`) }}</v-btn
      >
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn color="gray" v-bind="props">
            <span>中/en</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              class="bi bi-chevron-down mt-1 ms-1"
              viewBox="0 0 16 16"
            >
              <path
                fill-rule="evenodd"
                d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in lang"
            :key="index"
            :value="item.text"
            @click="setLang(item.text)"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-toolbar-items>
  </v-app-bar>
</template>

<style lang="scss" scoped>
ul {
  list-style: none;
}

.logo {
  width: 180px;
  max-width: 100%;
  margin-bottom: -10px;
  @media (max-width: 575px) {
    width: 140px;
    margin-bottom: -15px;
  }
}

.navbar {
  a,
  span {
    font-size: 16px;
    @media (max-width: 575px) {
      font-size: 14px;
    }
  }
}

.v-toolbar-title {
  flex: none !important;
  @media (max-width: 575px) {
    margin-inline-start: 0;
  }
}
</style>
