<template>
  <!-- todo we can use something like this for ethereum where the vault creation is too expensive to subsidize
    <PhoneCard v-if="s.vault===null || s.vault.length === 0">
      <v-card-title><v-icon color="warning" icon="mdi-safe-square-outline"/>&nbsp;Setup&nbsp;Vault</v-card-title>
      <v-card-subtitle>Create Your Own Personal Dexorder Vault</v-card-subtitle>
      <v-card-text>
        Dexorder never has access to your tokens. Instead, you create a personal
        vault which acts like your Dexorder account.
        Create your own personal asset vault to get started with Dexorder. This vault
        acts like your Dexorder account. For security, only <i>you</i> can deposit
        or withdraw tokens from your vault, and no token approvals are ever given to
        Dexorder. Instead, Dexorder sends trade requests to your vault at the right
        times, then your vault checks the validity of those trade requests before
        trading directly from your vault to the dex liquidity pool. Dexorder never
        has any access to the funds in your vault.
      </v-card-text>
      <v-card-text>
        Creating your personal vault is a one-time setup operation. Your vault address
        is unique to you and never changes. You may deposit or withdraw funds in your
        vault at any time, and you may save your vault address in your wallet for
        easy access.
      </v-card-text>
    </PhoneCard>
  -->
    <phone-card v-if="s.vaults.length<=num" class="maxw">
      <v-card-title><v-icon icon="mdi-safe-square" size="small" color="grey-darken-1"/> Create a Dexorder Vault</v-card-title>
      <v-card-text v-if="num!==0"><!--todo-->Multiple vaults are not yet supported</v-card-text>
<!-- todo restore the vault-on-order approach for public beta
      <v-card-text v-if="num===0">Create an order first, then your vault account will appear here to accept a deposit of trading funds.</v-card-text>
      <v-card-actions><v-btn prepend-icon="mdi-plus" text="Create Order" @click="$router.push('/twap')"/></v-card-actions>
-->
<!--  User-actioned but dexorder executed
      <v-card-text v-if="num===0">
        Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
        conditions are met, Dexorder creates a blockchain transaction for <code>vault.execute()</code>,
        asking your vault to the order. Your vault then checks that order against the
        current blockchain time and pool price, and only trades if everything looks good.

        Start placing dexorders by clicking the button below to create your own personal Vault!
      </v-card-text>
      <v-card-actions><btn icon="mdi-safe-square" color="grey-darken-1" text="Create Vault" @click="ensureVault"/></v-card-actions>
-->
      <v-card-text v-if="num===0">
        Please wait while your vault is being created.  This should only take a few seconds.
      </v-card-text>
    </phone-card>
    <v-card v-if="s.vaults.length>num" :class="empty?'maxw':''">
      <v-card-title><v-icon icon="mdi-safe-square" color="grey-darken-2" size="small"/> My Vault {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
      <v-card-subtitle v-if="exists" class="overflow-x-hidden"><copy-button :text="addr"/>{{addr}}</v-card-subtitle>
      <v-card-text v-if="empty">
        <p>
          Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
          conditions are met, Dexorder creates a blockchain transaction asking your vault to execute the order. Your
          vault then checks that order against the current blockchain time and pool price, and only trades if
          everything looks good.
        </p>
        <p v-if="!s.mockenv">There are no funds currently in your vault. Send tokens to the address above to fund your vault.</p>
        <p v-if="s.mockenv">There are no funds currently in your vault. Use the faucet below to mint some testnet coins into your vault.</p>
      </v-card-text>
      <v-card-item v-if="!empty">
        <v-table>
          <tbody>
            <suspense v-for="(amount,addr) of balances">
              <token-row :addr="addr" :amount="amount" :onWithdraw="onWithdraw"/>
            </suspense>
          </tbody>
        </v-table>
      </v-card-item>
    </v-card>
    <withdraw :vault="addr" :token="withdrawToken" v-model="withdrawShow"/>
<!--
    <div>
      addr {{ addr }}<br/>
      empty {{ empty }}<br/>
      exists {{ exists }}<br/>
    </div>
-->
</template>

<script setup>
import {useStore} from "@/store/store.js";
import {computed, defineAsyncComponent, ref} from "vue";
import {vaultAddress} from "@/blockchain/contract.js";
import {ensureVault} from "@/blockchain/wallet.js";
import CopyButton from "@/components/CopyButton.vue";
import NeedsProvider from "@/components/NeedsProvider.vue";
import Withdraw from "@/components/Withdraw.vue";
import PhoneCard from "@/components/PhoneCard.vue";
import Btn from "@/components/Btn.vue";

const TokenRow = defineAsyncComponent(()=>import('./TokenRow.vue'))
const s = useStore()

const props = defineProps(['owner', 'num'])
const addr = computed(()=>vaultAddress(props.owner, props.num))
const balances = computed(()=>{
  const bs = s.vaultBalances[addr.value]
  console.log('balances', addr.value, s.vaultBalances, bs)
  return bs || {}
})
const empty = computed(()=>Object.keys(balances.value).length===0)
const exists = computed(()=>s.vaults.length>0)

const withdrawToken = ref(null)
const withdrawShow = ref(false)
function onWithdraw(addr) {
  const token = s.tokens[addr]
  console.log('withdraw', addr, token)
  withdrawToken.value = token
  withdrawShow.value = true
}


function checkVault() {
  console.log('checkVault', props.num, s.account, s.vault)
  if(props.num===0 && s.account && !s.vault)
    ensureVault()
}

// todo remove automatic vault creation for Alpha 2
s.$subscribe((mutation, state)=>{
  console.log('test')
  checkVault()
})
checkVault()

</script>

<style scoped lang="scss">
@use "../styles/vars" as *;
p {
  margin-top: 1.5em;
}
</style>
