<template>
    <toolbar-pane title="Order">
      <template #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" @click="placeOrder"
               :color="orderColor" v-if="co.orders.length>0" :disabled="!valid">
          Place Dexorder
        </v-btn>
        <v-btn variant="text" prepend-icon="mdi-delete" v-if="co.orders.length>0"
                     :disabled="!orderChanged" @click="cancelOrder">Reset</v-btn>
      </template>
      <needs-chart>
        <template v-for="o in co.orders">
          <chart-order :order="o"/>
        </template>
        <v-dialog v-model="showResetDialog" max-width="300">
          <v-card title="Cancel Order?" text="Do you want to cancel this order and start again?">
            <v-card-actions>
              <v-spacer/>
              <v-btn @click="()=>showResetDialog=false">Keep Existing</v-btn>
              <v-btn @click="()=>{co.resetOrders(); showResetDialog=false}" color="red" text="Reset Order"/>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </needs-chart>
    </toolbar-pane>
</template>

<script setup>
import {orderFuncs, 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 {pendOrder} from "@/blockchain/wallet.js";
import ToolbarPane from "@/components/chart/ToolbarPane.vue";
import NeedsChart from "@/components/NeedsChart.vue";
import router from "@/router/index.js";

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 showResetDialog = 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)

const valid = computed(()=>{
  if (co.drawing)
    return false
  for ( const order of co.orders )
    if (!order.valid)
      return false
  return true
})


const orderChanged = computed(()=>!(co.orders.length===1 && co.orders[0].builders.length===0 && !co.orders[0].amount))

function cancelOrder() {
  showResetDialog.value = true
}


async function placeOrder() {
  const chartOrders = co.orders;
  const built = []
  for (const chartOrder of chartOrders) {
    console.log('chartOrder', chartOrder)
    const buildOrder = orderFuncs[chartOrder.id]
    const order = buildOrder()
    built.push(order)
  }
  console.log('place orders', built)
  if (built.length !== 1) {
    console.error('Multiple orders not supported')
  }
  else {
    await pendOrder(built[0])
    co.resetOrders()
    router.push('/status')
  }
}

</script>

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