<script>
import spotIcon from '@components/spotIcon';
import projectRelTime from '@components/projectRelTime';
import projectMapLink from '@components/projectMapLink';

export default {
	components: {
		spotIcon,
		projectRelTime,
		projectMapLink
	},
	props: {
		options: Object,
		type: String
	},
	emits: ['opening-lightbox'],
	data() {
		return {
			title:''
		}
	},
	inject: ['lang', 'isMobile'],
	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>
		<div v-if="options.comment && type == 'post'" class="comment">
			<p>
				<spotIcon icon="post" :text="options.comment" size="lg" />
			</p>
			<p v-if="!isMobile() && options.latitude && options.longitude">
				<spotIcon icon="coords" margin="right" size="lg" />
				<projectMapLink :options="options" />
			</p>
		</div>
	</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"
				titleWrapperName="media.posted_on"
				: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'"
				:titleWrapperName="'media.'+options.subtype+'_taken_on'"
				:localTime="options.taken_on_formatted_time_local"
				:siteTime="options.taken_on_formatted_time"
				:offset="options.taken_on_day_offset"
			/>
		</span>
	</div>
</template>
