<template>
	<label
		:for="`wcc-toggle-${name}`"
		class="wcc-toggle"
		@keydown.enter="labelToggle"
		@keydown.space="labelToggle"
		@click.stop="() => {}"
	>
		<input
			type="checkbox"
			:id="`wcc-toggle-${name}`"
			v-model="isChecked"
			:disabled="disabled"
			@input="$emit('input', $event.target.checked)"
			ref="input"
			:data-test-id="`wcc-toggle-${name}`"
		/>
		<span
			:class="['wcc-toggle-slider', { 'wcc-disabled': disabled }]"
			aria-hidden="true"
		></span>
		<span aria-hidden="true" class="wcc-toggle-icon wcc-toggle-icon-ticked">
			<svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
				<path d="M7.356 10.942a.497.497 0 00-.713 0l-.7.701a.501.501 0 00-.003.71l3.706 3.707a.501.501 0 00.705.003l7.712-7.712a.493.493 0 00-.006-.708l-.7-.7a.504.504 0 00-.714 0l-6.286 6.286a.506.506 0 01-.713 0l-2.288-2.287z" fill="currentColor"></path>
			</svg>
		</span>
		<span class="wcc-toggle-track"></span>
		<span aria-hidden="true" class="wcc-toggle-icon wcc-toggle-icon-crossed">
			<svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
				<path d="M15.185 7.4l-3.184 3.185-3.186-3.186a.507.507 0 00-.712.003l-.7.701a.496.496 0 00-.004.712l3.185 3.184L7.4 15.185a.507.507 0 00.004.712l.7.7c.206.207.516.2.712.004l3.186-3.185 3.184 3.185a.507.507 0 00.712-.004l.701-.7a.496.496 0 00.003-.712l-3.186-3.186 3.186-3.184a.507.507 0 00-.003-.712l-.7-.7a.508.508 0 00-.36-.153.5.5 0 00-.353.15z" fill="currentColor" fill-rule="evenodd"></path>
			</svg>
		</span>
	</label>
</template>

<script>
export default {
	props: {
		value: {
			type: Boolean,
			default: false,
		},
		name: {
			type: String,
			default: "",
		},
		text: {
			type: String,
			default: "",
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		inputId: String,
	},
	data() {
		return {
			isChecked: this.value,
		};
	},
	watch: {
		value(newVal) {
			this.isChecked = newVal;
		},
	},
	methods: {
		labelToggle() {
			this.$refs.input.click();
		},
	},
};
</script>
