<template>
  <q-page 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="Gönderilecek mail"
          filled
          dense
        />
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          color="primary"
          label="Test Mail Gönder"
          :loading="store.loading"
          @click="send"
        />
      </q-card-actions>
    </q-card>

  </q-page>
</template>

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

const { canRead, canWrite, canUpdate } = usePermission()

const canReadOrder   = canRead('order')
const canWriteOrder  = canWrite('order')
const canUpdateOrder = canUpdate('order')

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

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

async function send () {
  try {
    await store.sendTestMail(to.value)

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