<template>
  <v-text-field label='Amount' type="number" step="1" variant="outlined" aria-valuemin="0" min="0"
                v-model="os.amount" :rules="[validateRequired,validateAmount]" v-auto-select>
    <template v-slot:prepend-inner>
      <v-btn @click="os.amount = maxAmount">max {{maxAmount.toPrecision(5)}}</v-btn>
    </template>
    <template v-slot:append-inner>
      <v-btn @click="os.amountIsTokenA=!os.amountIsTokenA" variant="outlined" class="mr-2">
        {{ os.amountToken.symbol }}
      </v-btn>
      <v-btn :text="os.amountIsTotal ? 'total' : 'per tranche'" variant="outlined"
             @click="os.amountIsTotal=!os.amountIsTotal" class="total"/>
    </template>
  </v-text-field>
</template>

<script setup>
import {useOrderStore, useStore} from "@/store/store";
// noinspection ES6UnusedImports
import {vAutoSelect} from "@/misc.js";
import {validateAmount, validateRequired} from "@/validate.js";
import {computed} from "vue";

const s = useStore()
const os = useOrderStore()

const inToken = computed( ()=>os.buy ? os.tokenB : os.tokenA )
const maxAmount = computed(()=>{
  const balance = s.balances[inToken]
  if( !balance )
    return 0
  const divisor = os.amountIsTotal ? 1 : os.tranches
  return balance / 10**inToken.value.decimals / divisor
})

</script>

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

</style>
