<script setup lang="ts" generic="T">
import { computed, ref, watch } from 'vue'
import { ToggleSwitch } from 'primevue';

const props = defineProps<{
  title: string,
  inherit: boolean,
  inheritValue: T,
  defaultValue: T
}>()

const model = defineModel<T>({ required: true })

const value = computed(() => props.inherit ? props.inheritValue : model.value)

</script>

<template>
  <tr>
    <td class="pr-4 whitespace-nowrap">
      {{ title }}
    </td>
    <td class="pr-4">
      <ToggleSwitch v-if="!inherit" class="align-middle" :model-value="value != undefined"
        @update:model-value="model = $event ? defaultValue : undefined" />
      <label v-else>Inherit</label>
    </td>
    <td class="h-11 flex gap-2">
      <slot :value :disabled="inherit"></slot>
    </td>
  </tr>
</template>
