<template>
  <span>
    {{adjValue}}
    <btn v-if="showBtn && adjValue!==null" size="small" variant="plain" @click="invert()">{{pair}}</btn>
  </span>
  <!--  todo optional pair label and inversion button -->
</template>

<script setup>
import {usePrefStore, useStore} from "@/store/store";
import {computed} from "vue";
import {token} from "@/blockchain/token.js";
import {pairKey, pairPrice} from "@/misc.js";
import Btn from "@/components/Btn.vue";

const props = defineProps(['value', 'baseToken', 'quoteToken', 'baseAddr', 'quoteAddr', 'showBtn', 'decimals'])

const s = useStore()
const prefs = usePrefStore()

const base = computed(() => props.baseToken ? props.baseToken : token(props.baseAddr))
const quote = computed(() => props.quoteToken ? props.quoteToken : token(props.quoteAddr))

function invert() {
  const k = pairKey(base.value,quote.value)
  prefs.inverted[k] = !prefs.inverted[k]
}

const adjValue = computed(() => props.value === null || props.value === undefined || !base.value || !quote.value ? null : pairPrice(base.value, quote.value, props.value, props.decimals).toPrecision(5))

const pair = computed(() => {
  const inToken = props.baseToken ? props.baseToken : token(props.baseAddr)
  const outToken = props.quoteToken ? props.quoteToken : token(props.quoteAddr)
  return !inToken || !outToken ? '___\\___' : prefs.inverted[pairKey(inToken, outToken)] ?
      outToken.symbol + '\\' + inToken.symbol : inToken.symbol + '\\' + outToken.symbol
})


</script>

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

</style>
