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

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

const prefs = usePrefStore()

const modelValue = defineModel()
const hasBeenShown = ref(false)

const props = defineProps({
  key: {type: String, required: true},
  after: {type: String, default: null},
})

const show = computed({
  get() {
    const result = !prefs.hints[props.key] && modelValue.value && (props.after === null || prefs.hints[props.after])
        && !props.finished
    if (result)
      hasBeenShown.value = true
    else if (hasBeenShown.value)
      prefs.hints[props.key] = true
    return result
  },
  set(v) { if(!v) prefs.hints[props.key] = true}
})
</script>

<style scoped lang="scss">

</style>