<template>
	<div class="filter-section">
		<label class="filter-label noselect">
			<span class="label">
				<Checkbox
					:checked="!disabled"
					class="checkbox"
					@change="(checked) => $emit('enable', checked)"
				/>{{ label }}
			</span>

			<span
				v-if="!disabled"
				class="label-values"
			>{{ value[0] }} - {{ value[1] }}<template v-if="unit">&nbsp;{{ unit }}</template></span>
		</label>

		<span class="filter-split">
			<Range
				:min="min"
				:max="max"
				:value="value"
				:values="values"
				:disabled="disabled"
				:allow-enable="allowEnable"
				@enable="emit('enable', true)"
				@input="(range) => emit('input', range)"
				@change="(range) => emit('change', range)"
			>
				<template #start><slot name="start" /></template>
				<template #end><slot name="end" /></template>
			</Range>
		</span>
	</div>
</template>

<script setup>
import Checkbox from '../form/checkbox.vue';
import Range from '../form/range.vue';

defineProps({
	label: {
		type: String,
		default: null,
	},
	value: {
		type: Array,
		default: () => [0, 10],
	},
	values: {
		type: Array,
		default: null,
	},
	min: {
		type: Number,
		default: 0,
	},
	max: {
		type: Number,
		default: 10,
	},
	unit: {
		type: String,
		default: null,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	allowEnable: {
		type: Boolean,
		default: true,
	},
});

const emit = defineEmits(['change', 'input', 'enable']);
</script>