<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>
  -->
  <div>
    <div v-if="s.vaults.length<=num">
      <v-card-title>
        <v-icon icon="mdi-safe-square" size="small" color="grey-darken-1"/>
        Creating Your 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>
    </div>
    <div v-if="s.vaults.length>num" :class="empty?'maxw':''">
<!--      <v-card-title>-->
<!--        Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}-->
<!--      </v-card-title> &lt;!&ndash; todo vault nicknames &ndash;&gt;-->
      <v-card-subtitle v-if="exists" class="overflow-x-hidden">
        <copy-button :text="addr">Deposit {{addr}}</copy-button>
      </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 :chain-id="s.chainId" :addr="addr" :amount="amount" :onWithdraw="onWithdraw"/>
          </suspense>
          </tbody>
        </v-table>
      </v-card-item>
    </div>
    <withdraw :vault="addr" :token="withdrawToken" v-model="withdrawShow"/>
  </div>
<!--
    <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 Withdraw from "@/components/Withdraw.vue";
import {getToken} from "@/blockchain/token.js";

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

const props = defineProps(['owner', 'num'])
// todo use store.vault
const addr = computed(()=>vaultAddress(s.factory, s.vaultInitCodeHash, 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.values(balances.value).length===0)
const exists = computed(()=>s.vaults.length>0)

const withdrawToken = ref(null)
const withdrawShow = ref(false)
async function onWithdraw(addr) {
  const token = await getToken(s.chainId, 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()
}

setTimeout(checkVault, 0)

</script>

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