<template>
  <pn-page-card>
    <template #title>
      <pn-account-block-name/>
      <q-btn
        @click="logout()"
        flat
        round
        icon="mdi-logout"
      />
    </template>

    <pn-scroll-list>
      <q-list separator>
        <q-item
          v-for="item in displayItems"
          :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" v-if="$te(item.description)">
                {{ $t(item.description) }}
              </q-item-label>
            </q-item-section>
        </q-item>
      </q-list>
    </pn-scroll-list>
  </pn-page-card>

  <pn-small-dialog
    v-model="showStopUsingDialog"
    icon="mdi-close-box-outline"
    color="negative"
    title="account__stop_using_dialog_title"
    message1="account__stop_using_dialog_message1"
    message2="account__stop_using_dialog_message2"
    mainBtnLabel="account__stop_using_dialog_btn_ok"
    @clickMainBtn="onConfirmStopUsing"
  />
</template>

<script setup lang="ts">
  import { computed, ref, inject } from 'vue'
  import { useRouter } from 'vue-router'
  import { useAuthStore } from 'stores/auth'
  import type { WebApp } from '@twa-dev/types'

  const tg = inject('tg') as WebApp

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

  interface ItemList {
    id: number
    name: string
    description?: string
    icon: string
    iconColor?: string
    pathName: string
    display?: boolean 
  }

  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: 'change_account_auth_method', display: !authStore.customer?.email },
    { id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password', display: !!authStore.customer?.email },
    { id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email', display: !!authStore.customer?.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' },
    { id: 10, name: 'account__stop_using', icon: 'mdi-close-box-outline', description: 'account__stop_using_description', iconColor: 'negative', pathName: 'stop_using' }
  ]))

  const displayItems = computed(() => (
    items.value.filter((item: ItemList) => !('display' in item) || item.display === true)
  ))

  const showStopUsingDialog = ref(false)
  async function goTo (path: string) {
    if (path !== 'stop_using') {
      await router.push({ name: path })
    } else {
      showStopUsingDialog.value = true
    }
  }

  async function logout () {
    await authStore.logout()
    await router.push({ name: 'login' })
  }

  function onConfirmStopUsing () {
    tg.close()
  }

</script>

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