<template>
	<div class="filter">
		<RangeFilter
			label="height"
			:min="50"
			:max="220"
			:value="filters.height"
			:disabled="!filters.heightRequired"
			unit="cm"
			@enable="(checked) => emit('update', 'heightRequired', checked, filters.heightRequired !== checked)"
			@input="(range) => emit('update', 'height', range, false)"
			@change="(range) => emit('update', 'height', range, true)"
		>
			<template #start><Icon icon="height-short" /></template>
			<template #end><Icon icon="height" /></template>
		</RangeFilter>

		<RangeFilter
			label="weight"
			:min="30"
			:max="200"
			:value="filters.weight"
			:disabled="!filters.weightRequired"
			unit="kg"
			@enable="(checked) => emit('update', 'weightRequired', checked, filters.weightRequired !== checked)"
			@input="(range) => emit('update', 'weight', range, false)"
			@change="(range) => emit('update', 'weight', range, true)"
		>
			<template #start><Icon icon="meter-slow" /></template>
			<template #end><Icon icon="meter-fast" /></template>
		</RangeFilter>
	</div>
</template>

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

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

const emit = defineEmits(['update']);
</script>
