<template>
  <v-tooltip v-model="show" :close-on-content-click="true" :close-on-back="false" :close-delay="null"/>
</template>

<script setup>
import {computed, ref} from "vue";
import {usePrefStore} from "@/store/store.js";

const prefs = usePrefStore()

const props = defineProps({
  name: {type: String, required: true},
  when: {type: Boolean, default: true}, // optional conditional for when to show
  after: {type: String, default: null}, // set to the name of another hint that must happen before this hint, to chain hints into a tutorial.
  onComplete: {type: Function, default: null},
})

const forceClose = ref(false)
const shown = ref(false)

const show = computed({
  get() {
    const shownBefore = prefs.hints[props.name];
    const whenOk = props.when;
    const afterOk = props.after === null || prefs.hints[props.after];
    const result = !forceClose.value && !shownBefore && whenOk && afterOk
    // console.log(`show ${props.name}? ${result} <=`, !forceClose.value, whenOk, afterOk, prefs.hints)
    if (result) {
      shown.value = true
      prefs.hints[props.name] = true
    }
    return result
  },
  set(v) { if(!v) { forceClose.value=true; if (shown.value && props.onComplete) props.onComplete(); } }
})
</script>

<style scoped lang="scss">

</style>