<script setup>
import axios from "axios"
const supabase = useSupabaseClient()
const dataStore = useDataStore()

const createEMailAddress = ref("")
const createEMailType = ref("imap")
const showEmailAddressModal = ref(false)

const items = ref([])
const profiles = ref([])

const setupPage = async () => {
  items.value = await useSupabaseSelect("emailAccounts","*")
  profiles.value = await useSupabaseSelect("profiles","*")
}

const createAccount = async () => {
  showEmailAddressModal.value = false

  const {data,error} = await supabase.functions.invoke('emailengine_authenticate',{
    body: {
      emailAddress: createEMailAddress.value,
      accountType: createEMailType.value,
      profile: dataStore.activeProfile.id
    }
  })

  console.log(error)
  console.log(data)

  window.open(data.url, '_blank').focus();
}

setupPage()


const templateColumns = [
  {
    key: "emailAddress",
    label: "Adresse:"
  },
  {
    key: "profiles",
    label: "Bneutzer"
  },
  {
    key: "mailboxes",
    label: "Ordner"
  },
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))



</script>

<template>
  <UModal
    v-model="showEmailAddressModal"
  >
    <UCard>
      <template #header>
        E-Mail Adresse
      </template>
<!--      <UFormGroup
        label="E-Mail Adresse:"
      >

      </UFormGroup>-->

      <UInput
          v-model="createEMailAddress"
      />
<!--      <UFormGroup
        label="Account Typ:"
      >
        <USelectMenu
          :options="[{key: 'imap',label:'IMAP'}]"
          option-attribute="label"
          value-attribute="key"
          v-model="createEMailType"
        />
      </UFormGroup>-->
      <template #footer>
        <UButton
            @click="createAccount"
        >
          Erstellen
        </UButton>
      </template>
    </UCard>

  </UModal>
  <UDashboardNavbar title="E-Mail Konten">
      <template #right>
        <UButton
          @click="showEmailAddressModal = true"
        >
          + E-Mail Konto
        </UButton>
      </template>
  </UDashboardNavbar>
  <UTable
    :rows="items"
    :columns="columns"
    class="w-full"
    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
  >
    <template #profiles-data="{row}">
      {{row.profiles.map(i => profiles.find(x => x.id === i).fullName).join(", ")}}
    </template>
    <template #mailboxes-data="{row}">
      {{row.mailboxes.map(i => i.name).join(", ")}}
    </template>
  </UTable>
</template>

<style scoped>

</style>