<template>
  <pn-page-card>
    <template #title>
      {{ $t('support__title') }}
    </template>

    <pn-scroll-list>
      <div class="q-pa-md flex column w100 items-center">
        <div align="center" >
          <div>{{ $t('support__work_time_text') }}</div>
          <div class="flex items-center justify-center text-caption">
            <q-icon name="mdi-clock-time-four-outline"/>
            <div>{{ $t('support__work_time_time') }}</div>
          </div>
        </div>
        <q-btn
          no-caps
          icon="telegram"
          color="primary"
          rounded
          @click="openSupport"
          class="q-ma-lg"
          >
          <span class="q-pl-xs no-wrap">{{ $t('support__ask_question') }}</span>
        </q-btn>

        <div class="orline w100 text-grey">
          <span class="q-mx-sm text-caption">{{ $t('support__or') }}</span>
        </div>

        <div class="flex items-center justify-center text-primary q-ma-md">
          <q-icon name="mail" class="q-mr-xs"/>
          {{ supportEmailAddress }}
        </div>
      </div>
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { inject } from 'vue'
  import type { WebApp } from '@twa-dev/types'

  const tg = inject('tg') as WebApp
  const supportEmailAddress = 'a-mart@ya.ru'
  const supportTelegramUser = 'alexmart80'

  const telegramUrl = `https://t.me/${supportTelegramUser}`

  const openSupport = () => {
    if (tg?.platform !== 'unknown') {
      tg?.openLink(telegramUrl, { try_instant_view: true })
    } else {
      window.open(telegramUrl, '_blank')
    }
  }

</script>

<style scope>
  .hidden-href{
    display: none;
  }
</style>
