<template>
  <needs-provider>
    <phone-card class="tordercard">
      <v-card-title class="big">{{title}}</v-card-title>
      <v-card-subtitle>{{subtitle}}</v-card-subtitle>
      <v-card-item>
        <pair-choice/>
        <div v-if="os.route && !os.routesPending">
          <amount/>
          <slot/>
        </div>
      </v-card-item>
      <v-card-actions class="d-flex justify-space-evenly mb-4">
        <v-btn variant="outlined" color="red" @click="$router.push('/vault')">Cancel</v-btn>
        <v-btn variant="flat" color="green" :disabled="!valid()" @click="placeOrder">Place Dexorder</v-btn>
      </v-card-actions>
    </phone-card>
  </needs-provider>
</template>

<script setup>
import {useOrderStore, useStore} from "@/store/store";
import PhoneCard from "@/components/PhoneCard.vue";
import Amount from "@/components/Amount.vue"
// noinspection ES6UnusedImports
import {routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
import {newOrder} from "@/blockchain/orderlib.js";
import {FixedNumber} from "ethers";
import {pendOrder} from "@/blockchain/wallet.js";
import NeedsProvider from "@/components/NeedsProvider.vue";
import router from "@/router/index.js";
import PairChoice from "@/components/PairChoice.vue";

const s = useStore()
const os = useOrderStore()
const props = defineProps(['title','subtitle','valid','tranches'])

function placeOrder() {
  const ta = os.tokenA;
  const tb = os.tokenB;
  const tokenIn = os.buy ? tb.address : ta.address
  const tokenOut = os.buy ? ta.address : tb.address
  const route = os.route
  const amt = FixedNumber.fromString(os.totalAmount.toString(), {decimals: os.amountToken.decimals}).value
  const ts = props.tranches()
  const order = newOrder(tokenIn, tokenOut, route.exchange, route.fee, amt, os.amountIsInput, ts) // todo: minAmount, outputToOwner, chainOrder
  pendOrder(order)
  router.push('/orders')
}

</script>

<style scoped lang="scss">
@use "@/styles/vars" as *;

.tordercard {
  max-width: $card-maxw;
}

</style>
