<template>
	<div>
		<h1>Manage Photos</h1>
		<n-collapse
			v-if="photoGroups && photoGroups.length > 0"
			@item-header-click="loadPhotosInGroup"
		>
			<n-collapse-item
				v-for="group in photoGroups" :key="group.id"
				:title="group.name"
				:name="group.id">
				<template #header-extra>{{ group.date }}</template>

				<p v-if="!photos[group.id]">loading...</p>

				<n-space>
					<PhotoItem
						v-for="(photo, idx) in photos[group.id]" :key="idx"
						:src="getPhotoSrcById(photo.id)"
						:can_change_group="true"
						:can_crop="true"
						:can_change_ocr="true"
						:can_delete="true"
						@update:group="change_group_modal(photo.id)"
					/>
				</n-space>
			</n-collapse-item>
		</n-collapse>
		<p v-else>No Photo Groups</p>

		<n-modal
			v-model:show="showChangeGroupModal"
			:mask-closable="true" >
			<n-card
				style="width: 400px;"
				title="Change Photo Group"
				:bordered="false"
				role="dialog"
				aria-modal="true"
				>
				<n-select v-model:value="new_group" :options="groups_select_options" />
				<template #footer>
					<n-space justify="end">
						<n-button @click="showChangeGroupModal=false">Cancel</n-button>
						<n-button type="success" @click="changePhotoGroup">Change Group</n-button>
					</n-space>
				</template>
			</n-card>
		</n-modal>
	</div>
</template>

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

import PhotoItem from '@/components/PhotoItem'

export default {
	components: {
		PhotoItem,
	},
	setup() {
		useMeta({ title: 'Manage Photos' })
		const message = useMessage()
		return { message }
	},
	data() {
		return {
			current_photo: null,

			showChangeGroupModal: false,
			new_group: null,
		}
	},
	computed: {
		photoGroups() {
			let groups = this.$store.state.photoGroups
			if (groups !== null) {
				groups.sort((a,b) => {
					return a.date < b.date ? 1 : -1
				})
				let index = groups.indexOf(groups.filter(g=>g.id==1)[0])
				groups.unshift(groups.splice(index, 1)[0])
				return groups
			}
			return []
		},
		photos() {
			return this.$store.state.photos
		},
		groups_select_options() {
			if (this.photoGroups.length > 0) {
				let options = []
				for (const idx in this.photoGroups) {
					options.push({
						value: this.photoGroups[idx].id,
						label: this.photoGroups[idx].name,
					})
				}
				return options
			}
			return []
		},
	},
	mounted() {
		this.$store.dispatch('loadPhotoGroups').catch((error) => {
			this.message.error('Cannot load photo groups: ' + error)
		})
	},
	methods: {
		loadPhotosInGroup(group_data) {
			if (group_data.expanded)
				this.$store.dispatch('loadPhotosInGroup', group_data.name)
		},
		getPhotoSrcById(photo_id){
			for (const index in this.photos) {
				let group = this.photos[index]
				let photo = group.filter((photo) => photo.id == photo_id)
				if (photo.length > 0) {
					photo = photo[0]
					return photo.cropped_image !== null ? photo.cropped_image : photo.original_image
				}
			}
			return null
		},
		change_group_modal(photo_id) {
			this.current_photo = photo_id
			this.showChangeGroupModal = true
			this.new_group = null
		},
		changePhotoGroup(){
			if (this.new_group && this.current_photo) {
				this.$store.dispatch('updatePhoto', {
					id: this.current_photo,
					group: this.new_group
				}).then(()=>{
					this.current_photo = null
					this.new_group = null
					this.showChangeGroupModal = false
				})
			}
		}
	},
}
</script>

<style scoped>
</style>