<template>
<div class="btn-group">
	<button class="btn btn-primary" @click="edit" title="Edit Document"><i class='fa fa-pencil'></i></button>

	<div id="docedit" class="modal" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Edit Document</h5>
					<button @click="close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div v-if="loading" class="text-center">
						<div class="spinner-border" role="status">
							<span class="visually-hidden">Loading...</span>
						</div>
					</div>
					<div v-else>
						<div class="row">
							<div class="col-lg-6 col-12">
								<label for="internal_id">Order Number</label>
								<div class="input-group">
									<input @keyup.enter="save" @keyup.esc="close" @keyup="id_caps" type="text" class="form-control" name="internal_id" v-model="internal_id">
									<button @click="guess_docid" class="btn btn-secondary" title="Guess document ID"><i class="fa fa-wand-magic-sparkles"></i></button>
								</div>
								<label for="title">Title</label>
								<div class="input-group">
									<input ref="rtitle" @keyup.enter="save" @keyup.esc="close" type="text" class="form-control" name="title" v-model="title">
									<button @click="split_title" class="btn btn-secondary" title="Split down on cursor or selection"><i class="fa fa-i-cursor"></i></button>
								</div>
								<label for="subtitle">Subtitle</label>
								<div class="input-group">
									<input ref="rsubtitle" @keyup.enter="save" @keyup.esc="close" type="text" class="form-control" name="subtitle" v-model="subtitle">
									<button @click="split_subtitle" class="btn btn-secondary" title="Split down on cursor or selection"><i class="fa fa-i-cursor"></i></button>
								</div>
								<label for="subsubtitle">Sub-subtitle</label>
								<input @keyup.enter="save" @keyup.esc="close" type="text" class="form-control" name="subsubtitle" v-model="subsubtitle">
							</div>
							<div class="col-lg-6 col-12">
								<label for="overview">Overview <small>(Markdown supported)</small></label>
								<textarea @keyup.esc="close" name="overview" v-model="overview" class="form-control w-100" rows="5"></textarea>
								<label for="products">Products</label>
								<productselector v-model="products"></productselector>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button @click="close" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
					<button @click="save" type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<script>
import { ref } from 'vue/dist/vue.esm-bundler';

export default {
	setup() {
		return {
			loading: ref(true),
			internal_id: ref(""),
			title: ref(""),
			subtitle: ref(""),
			subsubtitle: ref(""),
			overview: ref(""),
			products: ref(""),
		}
	},

	mounted() {
	},

	methods: {
		edit() {
			this.loading = true;
			$('#docedit').show();
			$.ajax({
				url: "/api/document/" + this.docid,
				method: "GET"
			}).done(this.get_products);
		},

		get_products(data) {
			this.internal_id = data.internal_id;
			this.title = data.title;
			this.subtitle = data.subtitle;
			this.subsubtitle = data.subsubtitle;
			this.overview = data.overview;
			$.ajax({
				url: "/api/document/" + this.docid + "/products",
				method: "GET"
			}).done(this.fill_products);
		},

		fill_products(data) {
			this.products = "";
			for (var i = 0; i < data.length; i++) {
				if (this.products != "") {
					this.products += ",";
				}
				this.products += data[i].id;
			}
			this.loading = false;
		},

		close() {
			$('#docedit').hide();
		},

		save() {
			$.ajax({
				url: "/api/document/" + this.docid,
				method: "POST",
				data: {
					internal_id: this.internal_id,
					title: this.title,
					subtitle: this.subtitle,
					subsubtitle: this.subsubtitle,
					overview: this.overview,
					products: this.products,
				}
			}).done(this.refresh);
		},

		refresh() {
			window.location.reload();
		},

		id_caps() {
			this.internal_id = this.internal_id.toUpperCase();
			this.internal_id = this.internal_id.replace("–", "-");
		},

		get_caret_position(oField) {
			// Initialize
			var iCaretPos = 0;

			if (document.selection) {

				// Set focus on the element
				oField.focus();

				// To get cursor position, get empty selection range
				var oSel = document.selection.createRange();

				// Move selection start to 0 position
				oSel.moveStart('character', -oField.value.length);

				// The caret position is selection length
				iCaretPos = oSel.text.length;
			} else if (oField.selectionStart || oField.selectionStart == '0') {
				iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;
			}
			return iCaretPos;
		},

		split_title() {
			var pos = this.get_caret_position(this.$refs.rtitle);
			var l = this.title.substring(0, pos);
			var r = this.title.substring(pos);
			this.title = l;
			this.subtitle = r;
			console.log(pos);
		},

		split_subtitle() {
			var pos = this.get_caret_position(this.$refs.rsubtitle);
			var l = this.subtitle.substring(0, pos);
			var r = this.subtitle.substring(pos);
			this.subtitle = l;
			this.subsubtitle = r;
			console.log(pos);
		},

		guess_docid() {
			$.ajax({
				url: "/api/docid/" + this.docid,
				method: "GET"
			}).done(this.guessed_docid);
		},

		guessed_docid(d) {
			this.internal_id = d.docid;
		},
	},

	props: [
		"docid",
	],
}
</script>
