<script>
export default {
	inheritAttrs: false,
}
</script>
<script setup>
import Checkbox from "primevue/checkbox";
import {ref, watch} from "vue";

const props = defineProps(["inputId", "checked", "modelValue", "onChange"])
const emits = defineEmits(["emits"])
const checkboxRef = ref()

const inputId = ref("checkbox-" + Math.random().toString().replace(/\./, "").substring(0, 6))
if (typeof props.inputId === "string") {
	inputId.value = props.inputId
}

const onChange = () => {
	emits("change", !checkboxRef.value.checked) // MUST revert the value use '!'
}

const valueRef = ref(false)
if (props.checked === "checked") {
	valueRef.value = true
} else {
	valueRef.value = props.modelValue
}

watch(() => props.modelValue, () => {
	valueRef.value = props.modelValue
})

</script>

<template>
	<div :class="{'flex gap-2 items-center': $slots.default}">
		<Checkbox ref="checkboxRef" binary v-bind="$attrs" :inputId="inputId" @change="onChange" v-model="valueRef"></Checkbox>
		<label class="cursor-pointer" :for="inputId" v-if="$slots.default">
			<slot></slot>
		</label>
	</div>
</template>

<style scoped>
:deep(.p-checkbox-box) {
	border-radius: 0;
}
</style>