<template>
  <order title="Diagonal" subtitle="Trends and channels" :tranches="buildTranches" :valid="validOrder">
    <!-- todo times -->
    <div class="title">Line Point A</div>
    <v-divider/>
    <time-entry v-model="date1" class="mb-0" hide-details="true"/>
    <limit-price v-model="price1" label="Price A" :required="true" :show-price="false"/>
    <div class="title">Line Point B</div>
    <v-divider/>
    <time-entry v-model="date2" hide-details="true"/>
    <limit-price v-model="price2" label="Price B" :required="true" :show-price="false"/>
    <div v-if="curLimit">
      <v-row>
        <v-col cols="6">
          <span>Current line value</span>&nbsp;<span class="text-green">{{curLimit ? curLimit.toPrecision(5) : curLimit}}</span>
        </v-col>
        <v-col cols="6">
          <span>Current price</span>&nbsp;<route-price class="text-green"/>
        </v-col>
      </v-row>
    </div>
    {{os.limitIsMinimum}}
  </order>
</template>

<script setup>
import {useOrderStore, useStore} from "@/store/store";
import LimitPrice from "@/components/LimitPrice.vue";
import Order from "@/components/Order.vue";
import {computed, ref} from "vue";
import {applyLinePoints, linePointsValue, useChartOrderStore} from "@/orderbuild.js";
import {newTranche} from "@/blockchain/orderlib.js";
import TimeEntry from "@/components/TimeEntry.vue";
import RoutePrice from "@/components/RoutePrice.vue";

import {timestamp} from "@/common.js";

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

const date1 = ref(new Date())
const price1 = ref(null)
const date2 = ref(new Date())
const price2 = ref(null)
const time1 = computed(()=>timestamp(date1.value))
const time2 = computed(()=>timestamp(date2.value))
const curLimit = computed(()=>linePointsValue(time1.value, price1.value, time2.value, price2.value, s.clock))

function buildTranches() {
  const t = newTranche();
  const co = useChartOrderStore();
  applyLinePoints(t, co.selectedSymbol, os.buy, time1.value, price1.value, time2.value, price2.value)
  return [t]
}

function validOrder() {
  return date1.value && (price1.value || price1.value===0) && date2.value && (price2.value || price2.value===0)
}

</script>

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

</style>
