<!-- eslint-disable vue/no-mutating-props -->
<template>
	<n-modal v-model:show="showSelection" :mask-closable=false>
		<n-card
			style="width: 75vw"
			title="Select Photos"
			:bordered="false"
			size="huge"
			role="dialog"
			aria-modal="true"
			>
			<template #header-extra>
				<p v-if="isFinite(max_select) && !or_less">
					{{num_selected}}/{{max_select}} photo(s) selected
				</p>
				<p v-else-if="isFinite(max_select) && or_less">
					maximum of {{selecions_left}} photo(s) left
				</p>
				<p v-else>
					{{num_selected}} photo(s) selected
				</p>
			</template>
			<n-scrollbar style="max-height: 80vh;">
				<n-collapse :default-expanded-names="[first_group_id]">
					<n-collapse-item v-for="group in sortedPhotoGroups"
						:key="group.id"
						:title="group.name"
						:name="group.id">
					
						<n-image-group>
							<n-space>
								<n-image
									v-for="photo in photos[group.id]"
									:key="photo.id"
									width="100"
									:src="photo.cropped_image !== null ? photo.cropped_image : photo.original_image"
									@click="toggle_select_photo(photo.id)"
									:class="{selected: is_photo_selected(photo.id)}"
									preview-disabled />
							</n-space>
						</n-image-group>

					<template #header-extra>{{group.date}}</template>
					</n-collapse-item>
				</n-collapse>
			</n-scrollbar>
			<template #action>
				<n-space justify="end">
					<n-button @click="this.$emit('closed')">Cancel</n-button>
					<n-button @click="this.$emit('closed'); this.$emit('selected', this.selection)" type="primary">Select</n-button>
				</n-space>
			</template>
		</n-card>
	</n-modal>
</template>

<script>
import { useMessage } from 'naive-ui'

export default {
	name: 'PhotoSelectModal',
	emits: [ 'closed', 'selected' ],
	props: {
		showSelection: {
			type: Boolean,
			required: true,
			default: false
		},
		max_select: {
			type: Number,
			required: false,
			default: Infinity,
		},
		or_less: {
			type: Boolean,
			required: false,
			default: true
		},
		alreadySelected: {
			type: Array,
			required: false,
			default: () => {return []}
		}
	},
	setup() {
		const message = useMessage()
		return { message }
	},
	data() {
		return { 
			selection: [],
			photoGroups: []
		}
	},
	watch: {
		showSelection: function () {
			if (this.showSelection) {
				this.selection = [...this.alreadySelected]
				this.$store.dispatch('loadPhotoGroups').then(() => {
					this.photoGroups = this.$store.getters.photoGroups
					this.$store.dispatch('loadPhotosInAllGroups')
				})
			}
		}
	},
	computed: {
		photos() {
			return this.$store.getters.photos
		},
		num_selected() {
			return this.selection.length
		},
		selecions_left() {
			return this.max_select - this.num_selected
		},
		first_group_id() {
			if (this.sortedPhotoGroups.length > 0)
				return this.sortedPhotoGroups[0].id
			return -1
		},
		sortedPhotoGroups() {
			return [...this.photoGroups].sort((a,b) => {
				if (a.date === null) return 1
				if (b.date === null) return -1
				return a.date > b.date ? -1 : 1
			})
		}
	},
	methods: {
		toggle_select_photo(photo_id) {
			if (this.is_photo_selected(photo_id)) {
				const index = this.selection.indexOf(photo_id)
				this.selection.splice(index, 1)	
			} else {
				if (this.selecions_left > 0) {
					this.selection.push(photo_id)
				} else {
					this.message.error('You can only select ' + this.max_select + ' photo(s)')
				}
			}
		},
		is_photo_selected(photo_id) {
			return this.selection.includes(photo_id)
		}
	}
}
</script>

<style scoped>
.n-image {
	cursor: pointer;
}

.selected {
	opacity: 0.5;
}
</style>