<template>
  <field v-bind="$props">
    <UiBmsInputCheckbox
      class="field-checkbox"
      :modelValue="modelValue"
      :name="name"
      :label="labelValue"
      :disabled="disabled"
      :required="required"
      :error="errors.length > 0"
      @update:modelValue="(value: any) => $emit('update:modelValue', value)"
    >
      <template #label>
        <slot name="label" />
      </template>
    </UiBmsInputCheckbox>
  </field>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import UiBmsInputCheckbox from '@/components/form/UiBmsInputCheckbox.vue';
import { FieldComponentProps } from '@/plugins/field/field-component.model';

export interface Props extends FieldComponentProps {
  modelValue: any;
  labelValue: string;
  name: string;
}

const props = withDefaults(defineProps<Props>(), {
  required: false,
  label: '',
  disabled: false,
  errors: () => [],
});

const $emits = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
}>();

onMounted(() => {
  if (
    props.modelValue === null ||
    props.modelValue === undefined ||
    typeof props.modelValue !== 'boolean'
  ) {
    $emits('update:modelValue', false);
  }
});
</script>
