<template>
	<div class="base-checkbox" v-cy="'checkbox'">
		<input
			data-cy="base-checkbox"
			type="checkbox"
			:id="checkboxId"
			class="is-sr-only"
			:checked="checked"
			@change="(event) => emit('update:checked', (event.target as HTMLInputElement).checked)"
			:disabled="disabledValue"
		/>
		<slot :checkboxId="checkboxId" />
	</div>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue'
import {createRandomID} from '@/helpers/randomId'

export interface Props {
	checked: boolean,
	disabled?: boolean,
}

const {
	checked = false,
	disabled = false,
} = defineProps<Props>()

const emit = defineEmits<{
  (event: 'update:checked', value: boolean): void
}>()

const checkboxId = ref(`fancycheckbox_${createRandomID()}`)

// we want disabled to not render when not true
const disabledValue = computed(() => disabled || undefined)
</script>