<style lang="scss">
#share label {
	font-weight: bold;
}
</style>

<template>
	<span class="headerItem hasPopover">
		<PopoverHover id="share" @shown="focusShare">
			<span slot="target"><i class="lpSprite lpLink" /> Share</span>
			<div slot="content" class="lpFields">
				<div class="lpField">
					<label for="shareUrl">Share your list</label>
					<input id="shareUrl" v-select-on-bus="'show-share-box'"  v-select-on-focus type="text" :value="shareUrl">
				</div>
				<a id="csvUrl" :href="csvUrl" target="_blank" class="lpHref"><i class="lpSprite lpSpriteDownload" />Export to CSV</a>
			</div>
		</PopoverHover>
	</span>
</template>

<script>
import PopoverHover from './popoverHover.vue';

export default {
	name: 'Share',
	components: {
		PopoverHover,
	},
	computed: {
		library() {
			return this.$store.state.library;
		},
		list() {
			return this.library.getListById(this.library.defaultListId);
		},
		externalId() {
			return this.list.externalId || '';
		},
		baseUrl() {
			const location = window.location;
			return location.origin ? location.origin : `${location.protocol}//${location.hostname}`;
		},
		shareUrl() {
			return `${this.baseUrl}/list/${this.list.id}`;
		},
		csvUrl() {
			return `${this.baseUrl}/csv/${this.list.id}`;
		},
	}
};
</script>
