<template>
	<label class="checkbox-label relative flex items-center">
		<input class="hidden" type="checkbox" v-model="isChecked" :disabled="disabled">
		<span></span>
		<span v-if="label" class="ml-2">{{label}}</span>
	</label>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
	data() {
		return {
			isChecked: this.modelValue
		}
	},
	props: {
		disabled: {
			type: Boolean,
			default: false
		},
		label: {
			type: String,
			required: true
		},
		modelValue: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		isChecked(newState) {
			this.$emit("update:modelValue", newState);
			this.$emit("onChange", newState);
		}
	}
});
</script>

<style lang="postcss">

.checkbox-label input[type="checkbox"]:focus-visible + span {
	@apply ring ring-offset-2 ring-indigo-500;
}

.checkbox-label input[type="checkbox"] + span {
	@apply inline-block w-4 h-4 bg-white border rounded-sm border-gray-300;
}

.checkbox-label input[type="checkbox"]:checked + span {
	@apply bg-indigo-500 border-indigo-500;
}

.checkbox-label input[type="checkbox"] + span::before {
	content: '';
	position: absolute;
	border-color: white;
	border-width: 0;
	/* transform: translateY(0.3rem) rotate(45deg); */
}

.checkbox-label input[type="checkbox"]:checked + span::before {
	border-width: 0 0px 2px 2px;
	width: .5rem;
	height: .25rem;
	transform: translateX(calc(50% - 1px)) translateY(calc(0.3rem - 1px)) rotate(-45deg);
}

@keyframes shrink-bounce{
  0%{
    transform: scale(1);
  }
  33%{
    transform: scale(.85);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes checkbox-check{
  0%{
    width: 0;
    height: 0;
    border-color: #212121;
    transform: translate3d(0,0,0) rotate(45deg);
  }
  33%{
    width: .2em;
    height: 0;
    transform: translate3d(0,0,0) rotate(45deg);
  }
  100%{
    width: .2em;
    height: .5em;
    border-color: #212121;
    transform: translate3d(0,-.5em,0) rotate(45deg);
  }
}
</style>
