<script setup lang="ts">
import { resolveI18n } from '@bagelink/vue'
import { computed, onMounted } from 'vue'
import type { BagelInputShellProps } from './bagelInputShell'
import { useBagelInputShell } from './bagelInputShell'

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

const { shellClass, shellStyle } = useBagelInputShell(props)

const inputId = computed(() => props.id || Math.random().toString(36).slice(7))

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

onMounted(() => {
	// Don't auto-restore defaultValue - let user control their own content
	// if (checked.value === undefined) checked.value = props.defaultValue
})
</script>

<template>
	<div
		class="bagel-input bgl-toggle"
		:title
		:class="[shellClass, { small, 'has-value': checked }]" :style="shellStyle"
	>
		<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">
				{{ resolveI18n(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(--bgl-input-bg);
height: calc(var(--bgl-input-height) / 2);
width: calc(var(--bgl-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(--bgl-border-color);

}
.bgl-toggle input::before {
  position: absolute;
  content: "";
  height: calc(var(--bgl-input-height) / 2 - 2px);
  width: calc(var(--bgl-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(--bgl-input-height);
  font-size: var(--bgl-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-input-label-active-color, var(--bgl-primary));
}
.bgl-toggle :checked::before{
  margin-inline-start:calc(var(--bgl-input-height) / 2 - 2px) ;
}
.bgl-toggle input:checked + label {
color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
}

/* ── bgl-outline variant ── */
.bgl-outline input {
outline: 1.5px solid var(--bgl-border-color) !important;
outline-offset: 2px;
}

/* ── frame variant ── */
.frame input {
outline: 1.5px solid var(--bgl-border-color) !important;
outline-offset: 2px;
transition: outline-color 0.2s ease, box-shadow 0.2s ease;
background: transparent;
}

.frame input:checked {
outline-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent);
}

</style>
