<script setup>

import axios from "axios";

const bankingStore = useBankingStore()
const dataStore = useDataStore()

const newAccounts = ref([])
const selectedInstitution = ref("")
const institutions = ref([])
const setupPage = async () => {
  const {data,error} = await axios({
    url:`http://localhost:3002/banking/institutions`,
    method: "GET"
  })

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

  institutions.value = data


}



const createLink = async () => {
  const {data,error} = await axios({
    method: "POST",
    url:`http://localhost:3002/banking/link?tenant=${dataStore.currentTenant}&institution_id=${selectedInstitution.value}`,
  })

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

  if(data.link) {
    window.open(data.link,"_blank")
  }
}


setupPage()

</script>

<template>
  <UDashboardNavbar
    title="Neues Bankkonto anbinden"
  >

  </UDashboardNavbar>

  <UDashboardToolbar>
    <template #right>
      <UButton
        @click="createLink"
      >
        Weiter
      </UButton>
    </template>
  </UDashboardToolbar>

  <UForm class="p-5">
    <UFormGroup
      label="Bank auswählen:"
    >
      <USelectMenu
          :options="institutions"
          searchable
          v-model="selectedInstitution"
          value-attribute="id"
          option-attribute="name"
      />
    </UFormGroup>

  </UForm>


</template>

<style scoped>

</style>