<template>
<!-- todo slippage
    <row-bar :color="builder.color">
      <div class="bg-grey-lighten-1" style="width:1em">&nbsp;</div>
      <div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
      <div>
        <v-text-field type="number" v-model="builder.slippage"
                      density="compact" hide-details class="mx-1 my-2" variant="outlined"
                      label="Max Slippage" min="0" max="100" step="0.01"
                      style="width: 9em;"
                      clearable
        >
          <template v-slot:append-inner>%</template>
        </v-text-field>
      </div>
    </row-bar>
-->
</template>

<script setup>
import {builderDefaults, builderFuncs, useChartOrderStore} from "@/orderbuild.js";
import {computed, onMounted, onUnmounted} from "vue";
import {DEFAULT_SLIPPAGE, newTranche} from "@/blockchain/orderlib.js";

const co = useChartOrderStore()
const props = defineProps(['order', 'builder'])
const emit = defineEmits(['update:builder'])

// Fields must be defined in order to be reactive
builderDefaults(props.builder, {valid: true, slippage: DEFAULT_SLIPPAGE,})

// slippage is expressed in % but the underlying builder value is an unadjusted ratio, so we convert by a factor of
// 100 in and out
const slippage = computed({
  get() {console.log('slip',props.builder,props.builder.slippage); return props.builder.slippage*100},
  set(v) {props.builder.slippage=v/100; emit('update:builder', props.builder)}
})

const MIN_SLIPPAGE = 0.01;

function buildTranches() {
  let warnings = []
  if (slippage.value < MIN_SLIPPAGE)
    warnings.push('Slippage will be set to the minimum of 0.01%')
  const slip = Math.max(slippage.value, MIN_SLIPPAGE)
  return {
    tranches: [newTranche({marketOrder: true, slippage: slip / 100})],
    warnings,
  }
}

onMounted(() => builderFuncs[props.builder.id] = buildTranches)
onUnmounted(() => delete builderFuncs[props.builder.id])

</script>

<style scoped lang="scss">
:deep(.v-slider.v-input--vertical > .v-input__control) {
  min-height: 5em !important;
}
//:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
//  background-color: inherit !important;
//}
</style>

