<template>
  <q-page
    v-if="canSendTestMail"
    class="q-pa-md"
  >
    <q-card flat bordered class="q-pa-md" style="max-width: 500px">
      <q-card-section>
        <div class="text-h6">SMTP Test Mail</div>
      </q-card-section>

      <q-card-section>
        <q-input
          v-model="to"
          label="Gonderilecek mail"
          filled
          dense
        />
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          v-if="canSendTestMail"
          color="primary"
          label="Test Mail Gonder"
          :loading="store.loading"
          :disable="!canSendTestMail"
          @click="send"
        />
      </q-card-actions>
    </q-card>
  </q-page>

  <q-page
    v-else
    class="q-pa-md flex flex-center"
  >
    <div class="text-negative text-subtitle1">
      Bu module erisim yetkiniz yok.
    </div>
  </q-page>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useQuasar } from 'quasar'
import { useMailTestStore } from 'src/stores/mailTestStore'
import { usePermission } from 'src/composables/usePermission'

const { canWrite } = usePermission()
const canWriteUser = canWrite('user')
const canSendTestMail = computed(() => canWriteUser.value)

const $q = useQuasar()
const store = useMailTestStore()

const to = ref('mehmet.kececi@baggi.com.tr')

async function send () {
  if (!canSendTestMail.value) {
    $q.notify({
      type: 'negative',
      message: 'Test mail gonderme yetkiniz yok'
    })
    return
  }

  try {
    await store.sendTestMail(to.value)

    $q.notify({
      type: 'positive',
      message: 'Test mail gonderildi'
    })
  } catch (err) {
    $q.notify({
      type: 'negative',
      message: err?.message || 'Mail gonderilemedi'
    })
  }
}
</script>
