<script>
import SpotIcon from './spotIcon.vue';
import SpotButton from './spotButton.vue';
import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
import "blueimp-file-upload/js/jquery.iframe-transport.js";
import "blueimp-file-upload/js/jquery.fileupload.js";

export default {
	name: 'upload',
	components: { SpotButton, SpotIcon },
	inject: ['spot', 'projects', 'consts', 'user'],
	data() {
		return {
			project: this.projects[this.spot.vars('default_project_codename')],
			files: [],
			logs: [],
			progress: 0
		};
	},
	mounted() {
		this.spot.addPage('upload', {});

		if(this.project.editable) {
			$('#fileupload')
				.fileupload({
					dataType: 'json',
					formData: {t: this.user.timezone},
					acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov)$/i,
					done: (e, asData) => {
						$.each(asData.result.files, (iKey, oFile) => {
							let bError = ('error' in oFile);

							//Feedback
							this.logs.push(bError?oFile.error:(this.spot.lang('upload_success', [oFile.name])));

							//Comments
							oFile.content = '';
							if(!bError) this.files.push(oFile);
						});
					},
					progressall: (e, data) => {
						this.progress = parseInt(data.loaded / data.total * 100, 10);
					}
				});
		}
		else this.logs = [this.spot.lang('upload_mode_archived', [this.project.name])];
	},
	methods: {
		addComment(oFile) {
			this.spot.get2('add_comment', {id: oFile.id, content: oFile.content})
				.then((asData) => {this.logs.push(this.spot.lang('media_comment_update', asData.filename));})
				.catch((sMsgId) => {this.logs.push(this.spot.lang(sMsgId));});
		},
		addPosition() {
			if(navigator.geolocation) {
				this.logs.push('Determining position...');
				navigator.geolocation.getCurrentPosition(
					(position) => {
						this.logs.push('Sending position...');
						this.spot.get2('add_position', {'latitude':position.coords.latitude, 'longitude':position.coords.longitude, 'timestamp':Math.round(position.timestamp / 1000)})
							.then((asData) => {this.logs.push('Position sent');})
							.catch((sMsgId) => {this.logs.push(self.lang(sMsgId));});
					},
					(error) => {
						this.logs.push(error.message);
					}
				);
			} 
			else this.logs.push('This browser does not support geolocation');
		}
	}
}
</script>
<template>
	<div id="upload">
		<a name="back" class="button" href="#project"><SpotIcon :icon="'back'" :text="spot.lang('nav_back')" /></a>
		<h1>{{ spot.lang('upload_title') }}</h1>
		<h2>{{ this.project.name }}</h2>
		<div class="section" v-if="project.editable">
			<input id="fileupload" type="file" name="files[]" :data-url="this.spot.getActionLink('upload')" multiple />
		</div>
		<div class="section progress" v-if="progress > 0">
			<div class="bar" :style="{width:progress+'%'}"></div>
		</div>
		<div class="section comment" v-for="file in files">
			<img class="thumb" :src="file.thumbnail" />
			<div class="form">
				<input class="content" name="content" type="text" v-model="file.content" />
				<input class="id" name="id" type="hidden" :value="file.id" />
				<SpotButton :classes="'save'" :icon="'save'" :text="spot.lang('save')" @click="addComment(file)" />
			</div>
		</div>
		<div class="section location">
			<SpotButton :icon="'message'" :text="spot.lang('new_position')" @click="addPosition()" />
		</div>
		<div class="section logs" v-if="logs.length > 0">
			<p class="log" v-for="log in logs">{{ log }}.</p>
		</div>
	</div>
</template>