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

export default {
	components: {
		spotIcon,
		projectMapLink,
		projectMediaLink,
		projectRelTime
	},
	props: {
		options: Object,
		project: Object,
		hikes: Object
	},
	inject: ['lang', 'consts', 'isMobile'],
	computed: {
		activeTimeInterval() {
			if(this.options.mode == this.consts.modes.blog) return this.lang.get('project.wip');

			const sYearFrom = this.options.active_from.substr(0, 4);
			const sYearTo = this.options.active_to.substr(0, 4);
			return (sYearFrom == sYearTo)?sYearFrom:(sYearFrom + '-' + sYearTo);
		},
		timeinfo() {
			return (this.options.type == 'media')?
				{
					icon: 'image-shot',
					local_time: this.options.taken_on_formatted_time_local,
					site_time: this.options.taken_on_formatted_time,
					offset: this.options.taken_on_day_offset,
					relative_time: this.options.taken_on_relative_time
				}:
				{
					icon: 'time',
					local_time: this.options.formatted_time_local,
					site_time: this.options.formatted_time,
					offset: this.options.day_offset,
					relative_time: this.options.relative_time
				};
		},
		localTime() {
			return this.timeinfo.local_time +
				((this.project.mode == this.consts.modes.blog)?' (' + this.timeinfo.relative_time + ')':'')
			;
		}
	}
}
</script>

<template>
	<div :class="options.type+' '+options.subtype">
		<div class="header" v-if="options.type == 'track' || options.type == 'project'">
			<h1>
				<spotIcon v-if="options.type == 'project'" :icon="options.subtype" :classes="'track-'+options.subtype" size="lg" :text="this.options.name" width="auto" />
				<span v-else class="track" :title="lang.get('track.'+options.subtype)">
					<span class="line" :style="'background-color:'+hikes.colors[options.subtype]+';'"></span>
					<span class="desc">{{ this.options.name }}</span>
				</span>
			</h1>
			<p v-if="options.description && !options.leg" class="description">{{ options.description }}</p>
			<div v-if="options.subtype!='hitchhiking'" class="separator"></div>
		</div>
		<div v-if="options.type=='track'">
			<div v-if="options.leg" class="section destination">
				<spotIcon :title="lang.get('stats.from')" icon="start" width="fixed" size="lg" :text="options.leg.from" />
				<spotIcon :title="lang.get('stats.to')" icon="start" transform="rotate-180" width="fixed" size="lg" :text="options.leg.to" />
			</div>
			<div v-if="options.leg" class="separator"></div>
			<div v-if="options.subtype!='hitchhiking'" class="section track-stats">
				<spotIcon :title="lang.get('stats.distance')" icon="distance" width="fixed" size="lg" :text="options.distance+'km'" />
				<spotIcon :title="lang.get('stats.duration')" icon="time" width="fixed" size="lg" :text="options.duration" />
				<spotIcon :title="lang.get('stats.elevation_gain')" icon="elev-gain" width="fixed" size="lg" :text="options.elev_gain+'m'" />
				<spotIcon :title="lang.get('stats.elevation_loss')" icon="elev-drop" width="fixed" size="lg" :text="options.elev_drop+'m'" />
			</div>
		</div>
		<div v-else-if="options.type=='project'" class="section year">{{ activeTimeInterval }}</div>
		<div v-else>
			<div class="section" v-if="options.comment">
				<spotIcon icon="post" width="fixed" size="lg" :text="options.comment" />
			</div>
			<div class="section time">
				<projectRelTime :icon="timeinfo.icon" :localTime="localTime" :siteTime="timeinfo.site_time" :offset="timeinfo.offset" />
			</div>
			<div v-if="!isMobile()" class="section coordinates">
				<spotIcon icon="coords" width="fixed" size="lg" margin="right" />
				<projectMapLink :options="options" />
			</div>
			<div v-if="options.altitude" class="section altitude">
				<spotIcon icon="altitude" width="fixed" size="lg" :text="options.altitude+'m'" />
			</div>
			<div class="section weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)">
				<spotIcon :icon="options.weather_icon" width="fixed" size="lg" :text="options.weather_temp+'°C'" />
			</div>
			<div v-if="options.medias" class="section medias">
				<spotIcon v-if="options.type=='message'" icon="media" width="fixed" size="lg" :text="lang.get('media.nearby')" />
				<div class="medias-list">
					<projectMediaLink v-for="media in options?.medias" :options="media" :type="'marker'" />
				</div>
			</div>
		</div>
	</div>
</template>
