<template>
  <pn-page-card>
    <template #title>
      <div class="flex items-center no-wrap w100">
        <pn-account-block-name/>
        <q-btn
          v-if="user?.email"
          @click="logout()"
          flat
          round
          icon="mdi-logout"
          class="q-ml-md"
        />
      </div>
    </template>

    <pn-scroll-list>
      <q-list separator>
        <q-item
          v-for="item in items"
          :key="item.id"
          @click="goTo(item.pathName)"
          clickable
          v-ripple
          >
            <q-item-section avatar>
              <q-avatar
                :icon="item.icon"
                :color="item.iconColor ? item.iconColor: 'brand'"
                text-color="white"
                rounded
                font-size ="26px"
              />
            </q-item-section>
            <q-item-section>
              <q-item-label>
                {{ $t(item.name) }}
              </q-item-label>
              <q-item-label class="text-caption">
                {{ $t(item.description) }}
              </q-item-label>
            </q-item-section>
        </q-item>
      </q-list>
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { useAuthStore } from 'stores/auth'

  const router = useRouter()
  const authStore = useAuthStore()
  const user = authStore.user

  const items = computed(() => ([
    { id: 1, name: 'account__subscribe', description: 'account__subscribe_description', icon: 'mdi-crown-circle-outline', iconColor: 'orange', pathName: 'subscribe' },
    { id: 2, name: 'account__auth_change_method', description: 'account__auth_change_method_description', icon: 'mdi-account-sync-outline', iconColor: 'primary', pathName: '' },
    { id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password' },
    { id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email' },
    { id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
    { id: 6, name: 'account__settings', icon: 'mdi-cog-outline', description: 'account__settings_description', iconColor: 'info', pathName: 'settings' },
    { id: 7, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
    { id: 8, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
    { id: 9, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
  ]))

  async function goTo (path: string) {
    await router.push({ name: path })
  }

  async function logout () {
    await authStore.logout()
  }

</script>

<style lang="scss">
</style>
