<template>
  <v-text-field label="Tranches" type="number" variant="outlined" aria-valuemin="1" min="1" max="255"
                v-model="os.tranches" :rules="[validateRequired,validateTranches]" v-auto-select>
    <template v-slot:append-inner>tranches</template>
  </v-text-field>
  <v-text-field type="number" variant="outlined" :min="1" v-model="os.interval" class="interval"
                :label="os.intervalIsTotal ? 'Completion time' : 'Time between tranches'" v-auto-select>
    <template v-slot:prepend-inner>
      <v-btn variant="outlined" :text="os.intervalIsTotal ? 'Within' : 'Spaced apart'" class="within mr-2"
             @click="os.intervalIsTotal=!os.intervalIsTotal"/>
    </template>
    <template v-slot:append-inner>
      <v-btn variant="outlined" :text="timeUnitsStr" @click="toggleTimeUnits" class="time-units"/>
    </template>
  </v-text-field>
</template>

<script setup>
import {useOrderStore, useStore} from "@/store/store.js";
import {validateRequired, validateTranches} from "@/validate.js";
// noinspection ES6UnusedImports
import {vAutoSelect} from "@/misc.js";
import {computed} from "vue";

const os = useOrderStore()

const timeUnits = ['minutes', 'hours', 'days']
const timeUnitsStr = computed(()=>timeUnits[os.timeUnitIndex])

function toggleTimeUnits() {
  os.timeUnitIndex++
  if (os.timeUnitIndex >= timeUnits.length)
    os.timeUnitIndex = 0
}

</script>

<style scoped lang="scss">
@use "@/styles/vars" as *;
.interval {
  //width: 18em;
}

.within {
  width: 10em;
}

.time-units {
  width: 8em;
}
</style>
