<style type="text/css" scoped>

	.img-container {
		display: flex;
		flex-wrap: wrap;
	}

	.img-row {
		height: 30vh;
		flex-grow: 1;
	}

	.img-row:last-child {
		/* There's no science in using "10" here. In all my testing, this delivered the best results. */
		flex-grow: 10;
	}

	.img-row > img {
		max-height: calc(100% - 10px);
		min-width: calc(100% - 10px);
		max-width: calc(100% - 10px);
		object-fit: cover;
		vertical-align: bottom;
		/*padding: 5px;*/
		box-shadow: 0px 2px 2px 1px rgba(34,36,38,0.3);
		cursor: pointer;
	}

</style>

<template>
	<div>

		<div v-if="uploadedToNote.length > 0">
			<h2>Images Uploaded to Note</h2>
			<div class="ui fluid green button" v-on:click="$router.push('/attachments/note/'+noteId)">
				Manage Files on this Note
				<i class="chevron circle right icon"></i>
			</div>
			<p></p>
			<div class="img-container">
				<div v-for="file in uploadedToNote" class="img-row" v-on:click="onFileClick(file)">
					<img :src="`/api/static/thumb_${file.file_location}`">
				</div>

				<!-- extra row helps it display properly -->
				<div class="img-row"></div>
			</div>
		</div>
		

		<!-- Add images to note  -->
		<div v-if="files.length > 0">
			<h2>All other Images</h2>
			<div class="ui fluid green button" v-on:click="$router.push('/attachments')">
				Manage All Files
				<i class="chevron circle right icon"></i>
			</div>
			<p></p>
			<div class="img-container">
				<div v-for="file in files" class="img-row" v-on:click="onFileClick(file)">
					<img :src="`/api/static/thumb_${file.file_location}`">
				</div>

				<!-- extra row helps it display properly -->
				<div class="img-row"></div>
			</div>
		</div>
		
	</div>
</template>

<script>

	import axios from 'axios'

	export default {
		name: 'SimpleAttachmentNoteComponent',
		props: [ 'noteId', 'squireEditor' ],
		data () {
			return {
				files: [],
				uploadedToNote: [],
			}
		},
		beforeMount(){

		},
		mounted(){
			axios.post('/api/attachment/search', {'attachmentType':2})
			.then( ({data}) => {

				//Sort files into two categories
				data.forEach(file => {
					if(file['note_id'] == this.noteId){
						this.uploadedToNote.push(file)
					} else {
						this.files.push(file)
					}
				})
			})
		},
		methods: {
			onFileClick(file){

				const imageCode = `<img alt="image" src="/api/static/thumb_${file.file_location}">`

				this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode})

				if(this.$store.getters.getIsUserOnMobile){
					this.close()
				}
			},
			close() {
				this.$emit('close');
			},
		}
	}
</script>
