<template>
  <div class="d-flex flex-row align-start">
<!--
    <v-btn v-if="!multiplier"
           variant="outlined" :color="color"
           :text="(props.order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s"
           @click="props.order.buy=!props.order.buy"
           class="ml-3 mt-2 mr-2"
           size="2.5em"
           style="width: 9em"
    />
-->
    <div class="d-flex flex-column align-center">
      <v-switch v-if="!multiplier" v-model="switchModel" :color="sideColor" :base-color="sideColor" density="compact"
                class="my-0 mx-3 clickable">
        <template #prepend>
          <span :style="order.buy?{color:theme.colors.success}:{}" @click="order.buy=true" class="bs-button buy">Buy<br/>{{co.selectedSymbol.base.s}}</span>
        </template>
        <template #append>
          <span :style="!order.buy?{color:theme.colors.error}:{}" @click="order.buy=false" class="bs-button sell">Sell<br/>{{co.selectedSymbol.base.s}}</span>
        </template>
      </v-switch>
    </div>
    <v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="amount" variant="outlined"
                  :hint="available" :persistent-hint="true"
                  min="0"
                  class="amount mx-3"
                  style="max-width: 20em"
                  :color="color"
                  :label="order.amountIsTokenA ?
                (multiplier ? 'Amount each' : 'Amount') :
                ((multiplier ? 'Value each in ' : 'Value in ')+co.selectedSymbol.quote.s)">
      <template #prepend-inner>
        <v-btn variant="text" text="max" class="px-0" size="small"
               :disabled="!maxAmount || order.amountIsTokenA===order.buy && !co.price" @click="setMax"/>
      </template>
      <template #append-inner>
        <v-btn :text="order.amountIsTokenA?co.baseToken.s:co.quoteToken.s+' worth'"
               variant="text" @click="toggleAmountToken" style="width: 7em"/>
      </template>
    </v-text-field>
  </div>
</template>

<script setup>
import {useChartOrderStore} from "@/orderbuild.js";
import {computed, ref} from "vue";
import {useStore} from "@/store/store.js";
import Color from "color";
import {useTheme} from "vuetify";

const props = defineProps(['order', 'multiplier', 'color'])

const s = useStore()
const co = useChartOrderStore()

const theme = useTheme().current
// console.log('theme', theme.value)
const sideColor = computed(()=>new Color(props.order.buy?theme.value.colors.success:theme.value.colors.error).darken(0.2).string())
const switchModel = computed({
  get() {return !props.order.buy},
  set(v) {props.order.buy=!v}
})

const amount = computed({
  get() {
    let result = props.order.amount
    if (result !== null && props.multiplier)
      result /= props.multiplier
    return result
  },
  set(v) {
    if (v !== null && props.multiplier)
      v *= props.multiplier
    props.order.amount = v
  }
})

const available = computed(()=>{
  const max = maxAmount.value
  return max === null ? '' : `Available: ${maxAmount.value} ${inToken.value.s}`
})

const inToken = computed( ()=>props.order.buy ? co.quoteToken : co.baseToken )

const maxAmount = computed(()=>{
  const token = inToken.value;
  if (!token)
    return null
  const balance = s.balances[token.a]
  if( !balance )
    return null
  return balance / 10**token.d
})

const lastMaxValue = ref(-1)

function setMax() {
  let amount = maxAmount.value
  if (amount) {
    const order = props.order
    const price = co.price
    if (order.amountIsTokenA===order.buy) {
      if (order.buy)
        amount /= price
      else
        amount *= price
    }
    amount = Number(amount.toPrecision(7))
    lastMaxValue.value = amount
    order.amount = amount
  }
}

function toggleAmountToken() {
  const order = props.order
  order.amountIsTokenA=!order.amountIsTokenA
  if (order.amount === lastMaxValue.value)
    setMax()
}

</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;
.amount {
  max-width: 30em;
}
.bs-button {
  text-align: center;
  user-select: none;
  &.buy:hover {color: $green;}
  &.sell:hover {color: $red;}
}
</style>
