<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import { FieldDescription as ShadcnFieldDescription } from '@/components/core/field';
import { UiCheckbox } from '@/components/UiCheckbox';
import type { UiFieldDescriptionProps } from './types';
import type { UiCheckboxModelValue } from '@/components/UiCheckbox/types';
import { FIELD_DESCRIPTION_CHECKBOX_KEY } from './keys';

defineOptions({
  name: 'UiFieldDescription',
});

const props = withDefaults(defineProps<UiFieldDescriptionProps>(), {
  variant: 'default',
  disabled: false,
});

const parentCheckbox = inject(FIELD_DESCRIPTION_CHECKBOX_KEY, ref(false));

const showCheckbox = computed(
  () => props.variant === 'input' || parentCheckbox.value,
);

const checked = defineModel<UiCheckboxModelValue>();
</script>

<template>
  <ShadcnFieldDescription v-if="!showCheckbox">
    <slot />
  </ShadcnFieldDescription>

  <ShadcnFieldDescription v-else class="flex items-center gap-2">
    <UiCheckbox
      v-model="checked"
      :name="props.name ?? ''"
      :disabled="props.disabled"
    />
    <span><slot /></span>
  </ShadcnFieldDescription>
</template>
