<template>
	<div v-if="structured" class="input-group">
		<input type="date" class="form-control" placeholder="Date" v-model="datestr" />
		<input v-if="!dateonly" type="time" class="form-control" placeholder="Time" v-model="timestr" />
		<div class="input-group-append">
			<button type="button" class="btn btn-outline-secondary" @click="structured = false">✏</button>
		</div>
	</div>
	<div v-else class="input-group">
		<input type="text" class="form-control" placeholder="Date & Time" v-model="x_modelValue" />
		<div class="input-group-append">
			<button type="button" class="btn btn-outline-secondary" @click="structured = true;">📅</button>
		</div>
	</div>
</template>

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

	export default {
		props: {
			dateonly: Boolean,
			modelValue: String
		},
		emits: [
			'update:modelValue'
		],
		data() {
			return {
				structured: this.modelValue ? /^(\d{4})-(\d{1,2})-(\d{1,2})(?: (\d{1,2})\:(\d{1,2})(?:\:(\d{1,2}))?)?$/i.test(this.modelValue) : true,
				x_modelValue: this.modelValue
			};
		},
		computed: {
			datetime: {
				get() {
					var m = /^(\d{4})-(\d{1,2})-(\d{1,2})(?: (\d{1,2})\:(\d{1,2})(?:\:(\d{1,2}))?)?$/i.exec(this.x_modelValue);
					return m ? new Date(m[1], m[2] - 1, m[3], m[4], m[5], m[6]) : null;
				},
				set(value) {
					this.x_modelValue = ('0000' + value.getFullYear()).slice(-4) + '-' + ('00' + (value.getMonth() + 1)).slice(-2) + '-' + ('00' + value.getDate()).slice(-2) + ' ' + ('00' + value.getHours()).slice(-2) + ':' + ('00' + value.getMinutes()).slice(-2) + ':' + ('00' + value.getSeconds()).slice(-2);
				}
			},
			datestr: {
				get() {
					var res;
					return this.datetime ? (res = new Date(this.datetime), res.setHours(0, 0, 0, 0), res.toLocaleDateString('sv-SE')) : null;
				},
				set(value) {
					var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
					if(m) {
						var res = this.datetime ? new Date(this.datetime) : new Date();
						res.setFullYear(m[1], m[2] - 1, m[3]);
						this.datetime = res;
					}
				}
			},
			timestr: {
				get() {
					var res;
					return this.datetime ? (res = new Date(this.datetime), res.setFullYear(0, 0, 0), res.toLocaleTimeString('en-GB')) : null;
				},
				set(value) {
					var m = /^(\d{2})\:(\d{2})(?:\:(\d{2}))?$/.exec(value);
					if(m) {
						var res = this.datetime ? new Date(this.datetime) : new Date();
						res.setHours(m[1], m[2], m[3] || 0);
						this.datetime = res;
					}
				}
			}
		},
		watch: {
			modelValue(value) { this.x_modelValue = value; },
			x_modelValue(value) { if(validtime(value)) this.$emit('update:modelValue', value); },
			structured(value) {
				if(value) this.datetime = strptime(this.x_modelValue);
			}
		},
		methods: {
			strptime
		}
	};
</script>
