<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import Navbar from "@/components/Navbar.vue";

const { t } = useI18n();
const router = useRouter();
const store = useMainStore();

let username = ref("");

onMounted(async () => {
  if (!Object.keys(store.mocProfile).length) {
    await store.getMocProfile();
  }

  if (!Object.keys(store.mocProfile).length) {
    console.log("無 MocProfile");
    router.push("/");
  } else {
    username.value = store.mocProfile.NAME;
  }
  console.log("MOCProfile：", store.mocProfile);
  username.value = store.mocProfile.NAME;
});

const firstName = computed(() => {
  if (username.value) {
    const firstChar = username.value.charAt(0);
    return firstChar.toUpperCase();
  }
});

let items = [
  { type: "divider" },
  {
    title: "navbar.profile",
    icon: "mdi-account",
    url: "/user/profile",
    value: 1,
  },
  {
    title: "navbar.passport",
    icon: "mdi-book",
    url: "/user/passport",
    value: 2,
  },
  // {
  //   title: "我的提案",
  //   icon: "mdi-list-box",
  //   url: "/user/proposal",
  //   value: 3,
  // },
  {
    title: "navbar.courses",
    icon: "mdi-school",
    url: "/user/courses",
    value: 3,
  },
  {
    title: "navbar.collections",
    icon: "mdi-bookmark",
    url: "/user/favorite-class",
    value: 4,
  },
  // {
  //   title: "帳戶設定",
  //   icon: "mdi-cog",
  //   url: "/user/setting",
  //   value: 5,
  // },
  { type: "divider" },
];
</script>

<template>
  <Navbar />
  <v-container fluid class="pa-8 pa-sm-16 dashboard-container">
    <v-row>
      <v-col cols="12" lg="2">
        <v-card class="pa-5">
          <div class="user-info">
            <div class="img">
              <span> {{ firstName }}</span>
            </div>
            <p class="text-center name">{{ username }}</p>
          </div>

          <v-list class="w-100 mt-1">
            <v-list-item v-for="(item, index) in items" :key="index">
              <v-divider v-if="item.type === 'divider'"></v-divider>
              <div v-else class="d-flex">
                <router-link :to="item.url" class="d-flex">
                  <v-icon color="gray" class="me-2">{{ item.icon }}</v-icon>
                  <v-list-item-title>{{ t(item.title) }}</v-list-item-title>
                </router-link>
              </div>
            </v-list-item>
            <v-list-item>
              <div class="d-flex">
                <button
                  class="d-flex"
                  @click="
                    store.logout();
                    store.mocLogout();
                  "
                >
                  <v-icon color="gray" class="me-2">mdi-logout</v-icon>
                  <v-list-item-title>{{
                    t("navbar.logout")
                  }}</v-list-item-title>
                </button>
                <!-- <router-link to="/" class="d-flex">
                  <v-icon color="gray" class="me-2">mdi-logout</v-icon>
                  <v-list-item-title>登出</v-list-item-title>
                </router-link> -->
              </div>
            </v-list-item>
          </v-list>
        </v-card>
      </v-col>

      <v-col cols="12" lg="10">
        <router-view></router-view>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss">
.dashboard-container {
  max-width: 100% !important;
  letter-spacing: 0.0625em;

  .title {
    display: flex;
    justify-content: center;
    h4 {
      margin: 1.25em 0;
      padding-bottom: 1.25em;
      display: inline-block;
      font-size: 1.375em;
      font-weight: 500;
      text-align: center;
      border-bottom: 0.1875em solid var(--purple);
    }
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 4.375em;
      height: 4.375em;
      background-color: var(--purple);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6.25em;
      span {
        color: #fff;
        font-size: 2.125em;
        font-weight: 500;
      }
    }
    .name {
      font-size: 1.75em;
      margin-top: 0.9375em;
    }
  }

  .v-card {
    padding: 1.5em;
    .v-btn {
      font-size: 1.125em;
    }
  }

  .v-list {
    a,
    button {
      transition: all 0.3s;
      &:hover {
        opacity: 0.8;
      }
    }
  }

  .v-list-item-title {
    white-space: normal;
  }
}
</style>
