<script>
import spotIcon from './spotIcon.vue';
import projectRelTime from './projectRelTime.vue';

export default {
	components: {
		spotIcon,
		projectRelTime
	},
	props: {
		options: Object,
		type: String
	},
	emits: ['opening-lightbox'],
	data() {
		return {
			title:''
		}
	},
	inject: ['lang'],
	mounted() {
		this.title =
			(this.$refs.comment?this.$refs.comment.outerHTML:'') +
			this.$refs[this.type=='marker'?'takenon':'postedon'].outerHTML +
			this.$refs[this.type=='marker'?'postedon':'takenon'].outerHTML
		;
	},
	methods: {
		openMedia() {
			this.$refs.link.click();
		}
	}
}
</script>

<template>
	<a
		class="media-link drill"
		:href="options.media_path"
		:data-lightbox="type+'-medias'"
		:data-type="options.subtype"
		:data-id="options.id_media"
		:data-title="title"
		:data-orientation="options.rotate"
		@click="$emit('opening-lightbox', $event)"
		ref="link"
	>
		<img 
			:src="options.thumb_path"
			:width="options.width"
			:height="options.height"
			:title="lang.get((options.subtype == 'video')?'media.click_watch':'media.click_zoom')"
			class="clickable"
		/>
		<span class="drill-icon"><spotIcon :icon="'drill-'+options.subtype" /></span>
		<span v-if="options.comment && type == 'post'" class="comment">{{ options.comment }}</span>
	</a>
	<div style="display:none">
		<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">
			<spotIcon :icon="'post'" width="fixed" size="lg" :text-classes="'comment-text'" :text="options.comment" />
		</span>
		<span ref="postedon" class="lb-caption-line">
			<projectRelTime :icon="'upload'" :localTime="options.posted_on_formatted_time_local" :siteTime="options.posted_on_formatted_time" :offset="options.posted_on_day_offset" />
		</span>
		<span ref="takenon" class="lb-caption-line">
			<projectRelTime :icon="options.subtype+'-shot'" :localTime="options.taken_on_formatted_time_local" :siteTime="options.taken_on_formatted_time" :offset="options.taken_on_day_offset" />
		</span>
	</div>
</template>
