<template>
	<div class="buttonList" :style="{ gap: gap + 'px' }">
		<Button
			class="button"
			@click="setActiveIndex(item)"
			:is-active="isActive(item)"
			:disabled="disabled || item.disabled"
			v-for="item in list"
			:key="item.id"
		>
			<slot name="item" :item="item">
				{{ item.text }}
			</slot>
		</Button>
	</div>
</template>

<script setup>
import { ref } from "vue";
import Button from "../button/button.vue";
const props = defineProps({
	activeId: {
		type: [Number, Array],
		default: 0
	},
	gap: {
		type: Number,
		default: 8
	},
	multiple: {
		type: Boolean,
		default: false
	},
	list: {
		type: Array,
		default: function () {
			return [];
		}
	},
	disabled: {
		type: Boolean,
		default: false
	}
});
const emit = defineEmits(["click"]);
const isActive = item => {
	if (!props.multiple) {
		return item.id === props.activeId;
	} else {
		return props.activeId.includes(item.id);
	}
};
function setActiveIndex(item) {
	if (props.disabled || item.disabled) {
		return;
	}
	if (!props.multiple) {
		if (props.activeId === item.id) {
			return;
		}
		emit("click", item.id);
	} else {
		let idList;
		if (props.activeId.includes(item.id)) {
			idList = props.activeId.filter(currentId => currentId !== item.id);
		} else {
			idList = props.activeId.concat(item.id);
		}
		emit("click", idList);
	}
}
</script>

<style lang="scss" scoped>
.buttonList {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	flex-wrap: wrap;

	.button {
		&.is-disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}
}
</style>
