<template>
  <span v-if="route">{{price}}</span>
</template>

<script setup>
import {useStore} from "@/store/store";
import {subPrices, unsubPrices} from "@/blockchain/prices.js";
import {computed, onBeforeUnmount} from "vue";

const s = useStore()

const props = defineProps({
  route: {type: Object, required:true},
  inverted: {type: Boolean, required:true},
  precision: {type: Number, default:5, required:false},
})

const price = computed(()=>{
  const route = props.route;
  if( !route || !(route.pool in s.poolPrices) )
    return ''
  let p = s.poolPrices[route.pool]
  if( props.inverted )
    p = 1/p
  return p.toPrecision(props.precision)
})

if( props.route )
  subPrices([props.route])
else
  console.log('route is empty: no price')

onBeforeUnmount(() => {
  if( props.route )
    unsubPrices([props.route])
})


</script>

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