<template>
	<v-row align-v="center">
		<v-col class="flex-grow-0 order-1 d-flex text-center" cols="auto">
			<v-btn rounded variant="outlined" @click="remove" size="small">
				<v-icon icon="mdi-minus"></v-icon>
			</v-btn>
		</v-col>
		<v-col class="flex-grow-1 order-0 h6 text-capitalize">
			{{ innerValue }}
			{{ name }} {{ ageRange }}
		</v-col>
		<v-col class="order-2 flex-grow-0 d-flex text-center" cols="auto">
			<v-btn rounded variant="outlined" @click="add" size="small">
				<v-icon icon="mdi-plus"></v-icon>
			</v-btn>
		</v-col>
	</v-row>
	<slot></slot>
</template>

<script>
export default {
	props: {
		canAdd: {
			type: Boolean,
			default: true,
		},
		item: {
			type: Array,
			default: () => [],
		},
		minValue: {
			type: Number,
			default: 0,
		},
		maxPets: {
			type: Number,
			default: 0,
		},
		modelValue: {
			type: Number,
			default: 0,
		},
	},

	data() {
		return {
			innerValue: 0,
		};
	},
	computed: {
		ageRange() {
			return this.item[2] || "";
		},
		name() {
			return this.innerValue > 1 ? this.item[1] : this.item[0];
		},
	},
	watch: {
		modelValue: {
			immediate: true,
			handler(value) {
				this.innerValue = value;
			},
		},
		innerValue: {
			handler(value) {
				this.$emit("update:modelValue", value);
			},
		},
	},
	methods: {
		add() {
			const isPets = this.item[0] === "pet";
			if (
				(!isPets && !this.canAdd) ||
				(isPets && this.innerValue === this.maxPets && this.maxPets > 0)
			) {
				return false;
			}
			this.innerValue++;
		},
		remove() {
			if (this.innerValue > this.minValue) this.innerValue--;
		},
	},
};
</script>
