<template>
  <v-app>
    <main-view/>
    <v-dialog v-model="showTransactionDialog" max-width="300">
      <v-card :title="title">
        <v-card-text v-if="description!==null">{{description}}</v-card-text>
        <v-card-text v-if="!s.vault">Creating your trading vault smart contract. Please wait a few seconds...</v-card-text>
        <v-card-text v-if="s.vault && s.creatingVault">Verifying your trading vault...</v-card-text>
        <v-card-text v-if="s.vault && !s.creatingVault && ws.transaction !== null && ws.transaction.state === TransactionState.Proposed">Confirm this {{noun}} in your wallet.</v-card-text>
        <v-card-text v-if="s.vault && !s.creatingVault && ws.transaction !== null && ws.transaction.state !== TransactionState.Proposed">Signed and sent! Waiting for blockchain confirmation...</v-card-text>
      </v-card>
    </v-dialog>
    <pool-selection-dialog/>
  </v-app>
</template>

<script setup>
import MainView from './MainView.vue'
import {useStore} from "@/store/store.js";
import {computed} from "vue";
import {useWalletStore} from "@/blockchain/wallet.js";
import {FixedNumber} from "ethers";
import PoolSelectionDialog from "@/components/PoolSelectionDialog.vue";
import {TransactionState, TransactionType} from "@/blockchain/transactionDecl.js";

const s = useStore()
const ws = useWalletStore()
const showTransactionDialog = computed(()=>ws.transaction!==null)
const title = computed(()=>{
  switch (ws.transaction?.type) {
    case TransactionType.PlaceOrder:
      return "Placing Order"
    case TransactionType.CancelOrder:
      return "Canceling Order"
    case TransactionType.CancelAll:
      return "Cancel All Orders"
    case TransactionType.Wrap:
      return "Wrap"
    case TransactionType.Unwrap:
      return "Unwrap"
    case TransactionType.WithdrawNative:
    case TransactionType.Withdraw:
      return "Withdraw"
    default:
      return null
  }
})

const description = computed(()=>{
  const tx = ws.transaction
  switch (tx?.type) {
    case TransactionType.PlaceOrder:
      return describeOrder(tx.order)
    case TransactionType.CancelOrder:
      return null // todo fetch the order status and describe it
    case TransactionType.CancelAll:
      return null
    case TransactionType.Wrap:
      return `Wrap ${FixedNumber.fromValue(tx.amount,18)} ETH` // todo native token symbol and decimals
    case TransactionType.Unwrap:
      return `Unwrap ${FixedNumber.fromValue(tx.amount,18)} WETH` // todo wrapped token symbol and decimals
    case TransactionType.WithdrawNative:
      return `Withdraw ${FixedNumber.fromValue(tx.amount,18)} ETH` // todo native token symbol and decimals
    case TransactionType.Withdraw:
      return `Withdraw ${FixedNumber.fromValue(tx.amount,tx.token.d)} ${tx.token.s}`
    default:
      return null
  }
})


const noun = computed(()=>{
  const tx = ws.transaction
  switch (tx?.type) {
    case TransactionType.PlaceOrder:
      return 'order'
    case TransactionType.CancelOrder:
      return 'cancelation'
    case TransactionType.CancelAll:
      return 'cancelation'
    case TransactionType.Wrap:
      return 'wrapping'
    case TransactionType.Unwrap:
      return 'unwrapping'
    case TransactionType.WithdrawNative:
      return 'withdrawal'
    case TransactionType.Withdraw:
      return 'withdrawal'
    default:
      return null
  }
})


function describeOrder(order) {
  return null // todo
}


</script>

<style>
html {
  overflow-y: hidden;
}
</style>
