<style lang="scss">
</style>

<template>
	<modal id="itemLinkDialog" :shown="shown" @hide="shown = false">
		<h2>Add URL</h2>
		<form id="itemLinkForm" @submit.prevent="addLink">
			<div class="lpFields">
				<input v-model="url" v-select-on-bus="'focus-url-field'" type="text" d="itemLink" placeholder="Item Link">
				<div class="lpButtons">
					<input type="submit" class="lpButton" value="Save">
				</div>
			</div>
		</form>
	</modal>
</template>

<script>
import modal from './modal.vue';

export default {
	name: 'ItemLink',
	components: {
		modal,
	},
	data() {
		return {
			shown: false,
			item:  false,
			url:   '',
		};
	},
	beforeMount() {
		bus.$on('updateItemLink', (item) => {
			this.shown = true;
			this.item  = item;
			this.url   = item.url;
		});
	},
	mounted() {
		bus.$emit('focus-url-field');
	},
	methods: {
		addLink() {
			this.$store.commit('updateItemLink', {
				item: this.item,
				url:  this.url,
			});
			this.shown = false;
		},
	},
};
</script>
