<script setup>
import Checkbox from '#/components/form/checkbox.vue';

defineProps({
	stashes: {
		type: Array,
		default: () => [],
	},
	itemStashes: {
		type: Array,
		default: () => [],
	},
});

const emit = defineEmits(['stash', 'unstash', 'create']);
</script>

<template>
	<div class="stash-menu noselect">
		<ul class="stash-list nolist noselect">
			<li
				v-for="userStash in stashes"
				:key="`stash-${userStash.id}`"
				class="menu-item"
			>
				<label class="menu-stash">
					<Checkbox
						:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
						@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
					/>{{ userStash.name }}
				</label>
			</li>
		</ul>

		<div
			v-close-popper
			class="menu-item menu-stash create"
			@click="emit('create')"
		>
			<Icon icon="plus3" />
			New
		</div>
	</div>
</template>

<style scoped>
.stash-menu {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	overflow: hidden;
}

.stash-list {
	overflow-y: auto;
	min-height: 0; /* lets this flex child actually shrink and scroll instead of pushing the container taller */
}

.menu-item {
	display: flex;

	.icon {
		fill: var(--shadow-weak-10);
		padding: 0 .55rem 0 .2rem;
		transform: translateY(-1px);
	}
}

.menu-stash {
	display: flex;
	width: 100%;
	align-items: center;
	padding: .5rem;
	box-sizing: border-box;

	&:hover {
		cursor: pointer;
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}

	.check-container {
		margin-right: .5rem;
	}

	&.create {
		flex-shrink: 0;
		border-top: 1px solid var(--glass-weak-40);
	}
}
</style>
