<script setup lang="ts">

const route = useRoute()
const mode = route.params.mode

const itemInfo = ref({})

const setup = async () => {
  if(mode === "create") {

  } else {
    itemInfo.value = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`)
  }
}
setup()

const createAccount = async () => {
  const res = await useNuxtApp().$api(`/api/email/accounts`, {
    method: "POST",
    body: itemInfo.value,
  })

  if(res.success) {
    navigateTo("/settings/emailaccounts")
  }
}

const saveAccount = async () => {
  const res = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`, {
    method: "POST",
    body: itemInfo.value,
  })

  if(res.success) {
    navigateTo("/settings/emailaccounts")
  }

}

</script>

<template>
  <UDashboardNavbar :title="`E-Mail Konto ${mode === 'create' ? 'erstellen' : 'bearbeiten'}`">
    <template #right>
      <UButton
        v-if="mode === 'create'"
        @click="createAccount"
      >
        Erstellen
      </UButton>
      <UButton
        v-if="mode === 'edit'"
        @click="saveAccount"
      >
        Speichern
      </UButton>
    </template>
  </UDashboardNavbar>
  <UForm class="w-2/3 mx-auto mt-5">
    <UFormGroup
      label="E-Mail Adresse"
    >
      <UInput
        v-model="itemInfo.email"
      />
    </UFormGroup>

    <UFormGroup
        label="Passwort"
    >
      <UInput
          type="password"
          v-model="itemInfo.password"
          placeholder="********"
      />
    </UFormGroup>

    <USeparator label="IMAP"/>

    <UFormGroup
        label="IMAP Host"
    >
      <UInput
          v-model="itemInfo.imap_host"
      />
    </UFormGroup>

    <UFormGroup
        label="IMAP Port"
    >
      <UInput
          type="number"
          v-model="itemInfo.imap_port"
      />
    </UFormGroup>

    <UFormGroup
        label="IMAP SSL"
    >
      <UToggle
          v-model="itemInfo.imap_ssl"
      />
    </UFormGroup>

    <USeparator label="SMTP"/>

    <UFormGroup
        label="SMTP Host"
    >
      <UInput
          v-model="itemInfo.smtp_host"
      />
    </UFormGroup>

    <UFormGroup
        label="SMTP Port"
    >
      <UInput
          type="number"
          v-model="itemInfo.smtp_port"
      />
    </UFormGroup>

    <UFormGroup
        label="SMTP SSL"
    >
      <UToggle
          v-model="itemInfo.smtp_ssl"
      />
    </UFormGroup>

  </UForm>
</template>

<style scoped>

</style>