<template>
  <v-text-field v-model="mv" :label="getLabel" type="number"
                variant="outlined" aria-valuemin="0" min="0"
                :clearable="!required && clearable" :rules="rules" v-auto-select>
    <template v-slot:append-inner>
      <v-btn variant="outlined" @click="os.inverted=!os.inverted">
        {{ os.pairSymbol }}
      </v-btn>
    </template>
    <template v-if="showPrice" #details style="flex-direction: column-reverse">
      <div>
        Current price&nbsp;<route-price :inverted="routeInverted(os.route)" :route="os.route" class="text-green"/>
      </div>
    </template>
  </v-text-field>
</template>

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

const os = useOrderStore()
const props = defineProps({
  modelValue: {required: true},
  required: {default: false},
  label: {default: null},
  showPrice: {default: true},
  clearable: {default: true},
})
const emit = defineEmits(['update:modelValue'])

const mv = computed({
  get() {return props.modelValue},
  set(v) {emit('update:modelValue', v)}
})
const rules = computed(()=>props.required ? [validateAmount, validateRequired] : [validateAmount])

const getLabel = computed(()=>props.label !== null ? props.label : (os.limitIsMinimum?'Minimum':'Maximum') +' Price')

</script>
