<template>
	<div class="filter">
		<RangeFilter
			label="bra size"
			:min="0"
			:max="braSizes.length - 1"
			:value="filters.braSize"
			:values="braSizes"
			:disabled="!filters.braSizeRequired"
			@enable="(checked) => emit('update', 'braSizeRequired', checked, true)"
			@input="(range) => emit('update', 'braSize', range, false)"
			@change="(range) => emit('update', 'braSize', range, true)"
		>
			<template #start><Icon icon="boobs-small" /></template>
			<template #end><Icon icon="boobs-big" /></template>
		</RangeFilter>

		<span class="filter-label">Enhanced Boobs</span>

		<span
			:class="{ [['off', 'default', 'on'][naturalBoobsValues.indexOf(filters.naturalBoobs)]]: true }"
			class="toggle-container noclick"
		>
			<span
				class="toggle-label off"
				@click="emit('update', 'naturalBoobs', true, true)"
			><Icon icon="leaf" /></span>

			<input
				:value="naturalBoobsValues.indexOf(filters.naturalBoobs)"
				class="toggle"
				type="range"
				min="0"
				max="2"
				@change="emit('update', 'naturalBoobs', naturalBoobsValues[$event.target.value], true)"
			>

			<span
				class="toggle-label on"
				@click="emit('update', 'naturalBoobs', false, true)"
			><Icon icon="magic-wand2" /></span>
		</span>
	</div>
</template>

<script setup>
import RangeFilter from '#/components/filters/range.vue';

defineProps({
	filters: {
		type: Object,
		default: null,
	},
});

const emit = defineEmits(['update']);

const braSizes = 'ABCDEFGHIJKZ'.split('');
const naturalBoobsValues = [true, undefined, false];
</script>
