<script setup>
const props = defineProps({
	checked: {
		type: Boolean,
		default: false,
	},
	id: {
		type: String
	},
	label: {
		type: String
	},
	disabled: {
		type: Boolean
	}
})

const emit = defineEmits(['update:modelValue'])

const active = ref(props.checked);

watch(() => props.checked, (newValue) => {
	active.value = newValue;
})

watch(active, (newValue) => {
	emit('update:modelValue', newValue);
});
emit('update:modelValue', props.checked)

onMounted(() => {
	document.querySelector(`[for='${props.id}']`).addEventListener('click', () => {
		if (props.disabled) return;
		active.value = !active.value
	});
})
</script>

<template>
	<button role="switch" class="vl-toggle-switch" :aria-disabled="(props.disabled === true) ? 'true' : 'false'"
		:aria-label="label" :aria-labelledby="id" :tabindex="(disabled) ? '-1' : '0'"
		@click="(!disabled) ? active = !active : ''" :aria-checked="active" :data-state="(active) ? 'checked' : 'unchecked'">
		<div></div>
	</button>
</template>

<style scoped>    .vl-toggle-switch {
    	font-size: inherit;
    	border: 0;
    	cursor: pointer;
    	width: 2.5em;
    	height: 1.4em;
    	background: #1a1b1c;
    	border-radius: 100px;
    	padding: 0.125rem 0.25rem;
    	position: relative;
    	transition: background-color 0.3s ease;
    }

    .vl-toggle-switch[aria-disabled="true"] div {
    	background: #919191;
    }

    .vl-toggle-switch div {
    	position: relative;
    	left: 0;
    	width: 1em;
    	height: 1em;
    	background: #f7f7f7;
    	border-radius: 90px;
    	pointer-events: none;
    	transition: all 0.3s;
    }

    .vl-toggle-switch[data-state="checked"] {
    	background: hsl(226, 79%, 47.5%);
    }

    .vl-toggle-switch[data-state="checked"] div {
    	left: 100%;
    	transform: translateX(-100%);
    }

    .vl-toggle-switch:active div {
    	width: 1.3em;
    }
</style>