<template>
	<div class="card mb-3 shadow">
		<div class="card-header d-flex justify-content-between align-items-center">
			<span>New document</span>
			<a class="close" @click="() => $emit('cancel')">❌</a>
		</div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item"><ViewLocationLookup :client="client" :dfn="dfn" label="Visit" v-model="x_location" /></li>
			<li class="list-group-item"><ViewDocTitleLookup :client="client" label="Title" v-model="x_title" /></li>
			<li class="list-group-item"><ViewUserLookup :client="client" label="Author" v-model="x_author" /></li>
			<li class="list-group-item"><DateTimePicker v-model="x_datetime" /></li>
		</ul>
		<div class="card-footer btn-group" role="group"><button class="btn btn-primary" :disabled="!((x_location) && (x_location.IEN) && (x_title) && (x_author))" @click="() => $emit('submit', { location: x_location, title: x_title, author: x_author, datetime: fmdatetime(x_datetime) })">Create</button></div>
	</div>
</template>

<style scoped>
	a.close {
		cursor: default;
		text-decoration: none;
	}
</style>

<script>
	import { strptime, strftime } from './fmdatetime.mjs';

	import ViewLocationLookup from './ViewLocationLookup.vue';
	import ViewDocTitleLookup from './ViewDocTitleLookup.vue';
	import ViewUserLookup from './ViewUserLookup.vue';
	import DateTimePicker from './DateTimePicker.vue';

	export default {
		components: {
			ViewLocationLookup, ViewDocTitleLookup, ViewUserLookup, DateTimePicker
		},
		props: {
			client: Object,
			dfn: String,
			location: String,
			title: String,
			author: String,
			datetime: {
				type: String,
				default: 'N'
			}
		},
		emits: {
			'cancel': null,
			'submit': Object,
			'update:location': String,
			'update:title': String,
			'update:author': String,
			'update:datetime': String
		},
		data() {
			return {
				x_location: this.location,
				x_title: this.title,
				x_author: this.author,
				x_datetime: this.datetime
			};
		},
		watch: {
			location(value) { this.x_location = value; },
			x_location(value) { this.$emit('update:location', value); },
			title(value) { this.x_title = value; },
			x_title(value) { this.$emit('update:title', value); },
			author(value) { this.x_author = value; },
			x_author(value) { this.$emit('update:author', value); },
			datetime(value) { this.x_datetime = value; },
			x_datetime(value) { this.$emit('update:datetime', value); }
		},
		methods: {
			fmdatetime(datetime) {
				return strftime(strptime(datetime));
			}
		}
	};
</script>
