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

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

function stashes() {
	return this.$store.state.auth.user?.stashes || [];
}

export default {
	components: {
		Checkbox,
	},
	props: {
		stashedBy: {
			type: Array,
			default: () => [],
		},
	},
	emits: ['stash', 'unstash'],
	data() {
		const stashedByIds = new Set(this.stashedBy.map(stash => stash.id));

		return {
			stashedByIds,
		};
	},
	computed: {
		stashes,
	},
};
</script>

<style lang="scss" scoped>
.menu-item {
	display: block;
}

.menu-stash {
	display: flex;
	align-items: center;
	padding: .5rem 1rem .5rem .5rem;

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

.menu-check {
	display: inline-block;
	margin: 0 .75rem 0 0;
}
</style>