<script setup lang="ts">
import { onMounted } from 'vue'

const props = withDefaults(defineProps<{
	label?: string
	id?: string
	title?: string
	small?: boolean
	required?: boolean
	defaultValue?: boolean
}>(), { defaultValue: false })

const inputId = $ref(props.id || Math.random().toString(36).slice(7))

const checked = defineModel<boolean | undefined>('modelValue', { default: undefined })

onMounted(() => {
	if (checked.value === undefined) checked.value = props.defaultValue
})
</script>

<template>
	<div
		class="bagel-input bgl-toggle"
		:title
		:class="{ small }"
	>
		<div class="switch" :class="{ checked }">
			<span class="slider rounded" />
		</div>

		<input
			:id="inputId"
			v-model="checked"
			type="checkbox"
			:required
		>

		<label :for="inputId">
			<slot name="label">
				{{ label }}
			</slot>
		</label>
	</div>
</template>

<style scoped>
.bagel-input.bgl-toggle{
    display: unset !important;
}
.bagel-input.bgl-toggle *{
  cursor: pointer !important;
}
.bagel-input.bgl-toggle input{
    padding:  unset !important;
    min-width:  unset !important;
    margin: 0 !important;
}
.bgl-toggle input {
    appearance: none;
    position: relative;
    display: inline-block;
    background: var(--input-bg);
    height: calc(var(--input-height) / 2);
    width: calc(var(--input-height) - 2px);
    vertical-align: middle;
    border-radius: 2rem;
    box-shadow: 0px 1px 3px #0003 inset;
    transition: 0.25s linear all;
    outline: 1px solid var(--border-color);

}
.bgl-toggle input::before {
  position: absolute;
  content: "";
  height: calc(var(--input-height) / 2 - 2px);
  width: calc(var(--input-height) / 2 - 2px);
  inset-inline-start: 1px;
  bottom: 1px;
  border-radius: 50%;
  background: var(--bgl-box-bg);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  box-shadow:0 1px 5px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
}

.bgl-toggle label {
  padding-inline-start: 0.5rem;
  transition: var(--bgl-transition);
  cursor: pointer;
  user-select: none;
  line-height: var(--input-height);
  font-size: var(--input-font-size);
  vertical-align: middle;
}

.bgl-toggle label:hover {
  filter: brightness(90%);
}

.bgl-toggle label:active {
  filter: var(--bgl-active-filter);
}

.bgl-toggle input:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
    outline-offset: 2px
}
.bgl-toggle input:focus {
    outline-color: transparent;
}
.bgl-toggle input:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
    outline-offset: 2px
}
.bgl-toggle :checked{
  background: var(--bgl-primary);
}
.bgl-toggle :checked::before{
  margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
}
.bgl-toggle input:checked + label {
    color: var(--bgl-primary) !important;
}
</style>
