<template>
  <div class="d-flex flex-column h-100">
    <toolbar>
      <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
      <v-btn variant="text" prepend-icon="mdi-send" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
      <v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
    </toolbar>
    <v-dialog v-model="showCancel" max-width="300">
      <v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
        <v-card-actions>
          <v-spacer/>
          <v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
          <v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
    <div class="overflow-y-auto">
        <template v-for="o in co.orders">
          <chart-order :order="o"/>
        </template>
    </div>
  </div>
</template>

<script setup>
import {useChartOrderStore} from "@/orderbuild.js";
import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
import {computed, onBeforeUnmount, ref} from "vue";
import {useOrderStore, useStore} from "@/store/store.js";

import {routeFinder} from "@/blockchain/route.js";
import ChartOrder from "@/components/chart/ChartOrder.vue";
import {useTheme} from "vuetify";
import Toolbar from "@/components/chart/Toolbar.vue";

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

function changeSymbol(symbol) {
  console.log('changeSymbol', symbol)
  os.tokenA = symbol.base
  os.tokenB = symbol.quote
  routeFinder.invoke()
}


addSymbolChangedCallback(changeSymbol)
onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )


const showCancel = ref(false)

const theme = useTheme().current
const orderColor = computed(()=>co.orders.length===0?null : co.orders[0].buy ? theme.value.colors.success:theme.value.colors.error)

function cancelOrder() {
  showCancel.value = true
}

function placeOrder() {

}

</script>

<style lang="scss">
body {
  overflow-y: hidden;
}
.arrow {
  font-size: 22px;
}
</style>
