<template>
	<div>
		<div class="input-group">
			<span class="input-group-text">Test String:</span>
			<input @keyup="refresh" class="form-control" type="text" v-model="teststring">
			<span class="input-group-text"><i class="fa fa-arrow-left mx-1"></i> Type here to test matches</span>
			<button class="btn btn-success" @click="addnew">Add New Match</button>
		</div>
		<table class="table table-hover w-100">
			<thead>
				<tr>
					<th>Weight</th>
					<th>Regular Expression</th>
					<th>Example</th>
					<th>Test Result</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="match in matches" :class="matchtest(match.regex)" @click="edit_reg(match)">
					<td>{{ match.weight }}</td>
					<td>/^{{ match.regex }}$/</td>
					<td>{{ match.example }}</td>
					<td>{{ teststring != "" ? matchresult(match.regex, teststring) : matchresult(match.regex, match.example)}}</td>
				</tr>
			</tbody>
		</table>


        <div id="newreg" class="modal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add New ID Match</h5>
                        <button @click="addclose" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" :disabled="saving"></button>
                    </div>
                    <div class="modal-body">

						<label for="example">Example ID</label>
						<input type="text" name="example" class="form-control" v-model="add_example" @keyup="do_add_test">

						<label for="regex">Regular Expression</label>
						<div class="input-group">
							<span class="input-group-text">/^</span>
							<input type="text" name="regex" class="form-control" v-model="add_regex" @keyup="do_add_test">
							<span class="input-group-text">$/</span>
						</div>

						<label for="weight">Weight (lower is higher priority)</label>
						<input type="text" name="weight" class="form-control" v-model="add_weight">
						
						Test Result: {{ add_test }}

                    </div>
                    <div class="modal-footer">
                        <button @click="addclose" type="button" class="btn btn-secondary" data-bs-dismiss="modal" :disabled="saving">Close</button>
                        <button @click="addsave" type="button" class="btn btn-primary" :disabled="saving">
                            <span v-if="!saving">Save changes</span>
                            <span class="spinner-border spinner-border-sm" role="status" v-if="saving"></span>
                            <span v-if="saving" class="mx-1">Saving...</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="editreg" class="modal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit ID Match</h5>
                        <button @click="edit_close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" :disabled="saving"></button>
                    </div>
                    <div class="modal-body">

						<label for="example">Example ID</label>
						<input type="text" name="example" class="form-control" v-model="edit_example" @keyup="do_edit_test">

						<label for="regex">Regular Expression</label>
						<div class="input-group">
							<span class="input-group-text">/^</span>
							<input type="text" name="regex" class="form-control" v-model="edit_regex" @keyup="do_edit_test">
							<span class="input-group-text">$/</span>
						</div>

						<label for="weight">Weight (lower is higher priority)</label>
						<input type="text" name="weight" class="form-control" v-model="edit_weight">
						
						Test Result: {{ edit_test }}

                    </div>
                    <div class="modal-footer">
                        <button @click="edit_delete" type="button" class="btn btn-danger" :disabled="saving">Delete</button>
                        <button @click="edit_close" type="button" class="btn btn-secondary" data-bs-dismiss="modal" :disabled="saving">Close</button>
                        <button @click="edit_save" type="button" class="btn btn-primary" :disabled="saving">
                            <span v-if="!saving">Save changes</span>
                            <span class="spinner-border spinner-border-sm" role="status" v-if="saving"></span>
                            <span v-if="saving" class="mx-1">Saving...</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>


	</div>
</template>

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

export default {
	props: [
	],

	setup() {
		return {
			matches: ref([]),
			teststring: ref(""),
			saving: ref(false),
			add_example: ref(""),
			add_regex: ref(""),
			add_weight: ref(0),
			add_test: ref(""),
			edit_example: ref(""),
			edit_regex: ref(""),
			edit_weight: ref(0),
			edit_test: ref(""),
			edit_id: ref(0),
		}
	},

	methods: {
		init() {
			this.update();
		},

		refresh() {
			var m = this.matches;
			this.matches = [];
			this.matches = m;
		},

		update() {
			$.ajax({
				url: "/api/sys/idmatch",
				method: "GET"
			}).done(this.got_update);
		},

		got_update(data) {
			this.matches = data;
		},

		matchresult(regex, example) {
			try {
				const re = new RegExp("^" + regex + "$");
				var res = example.match(re);
				if (res == null) {
					return "FAILED";
				}
				return res[1];
			} catch (E) {
				return "Bad Syntax";
			}
		},

		matchtest(regex) {
			var teststring = this.teststring.trim();
			if (teststring == "") return "";
			if (this.matchresult(regex, teststring) != "FAILED") {
				return "table-success";
			}
			return "table-danger";
		},

		addnew() {
			this.add_example = "";
			this.add_regex = "";
			this.add_weight = 0;
			$('#newreg').show();
		},


		do_add_test() {
			this.add_test = this.matchresult(this.add_regex, this.add_example);
		},

		addclose() {
			$('#newreg').hide();
		},

		addsave() {
			$.ajax({
				url: "/api/sys/idmatch",
				method: "PUT",
				data: {
					example: this.add_example,
					regex: this.add_regex,
					weight: this.add_weight
				}
			}).done(this.got_update);
			$('#newreg').hide();
		},


		edit_reg(m) {
			this.edit_id = m.id;
			this.edit_example = m.example;
			this.edit_regex = m.regex;
			this.edit_weight = m.weight;
			$('#editreg').show();
		},

		edit_close() {
			$('#editreg').hide();
		},

		do_edit_test() {
			this.edit_test = this.matchresult(this.edit_regex, this.edit_example);
		},

		edit_save() {
			$.ajax({
				url: "/api/sys/idmatch/" + this.edit_id,
				method: "POST",
				data: {
					example: this.edit_example,
					regex: this.edit_regex,
					weight: this.edit_weight
				}
			}).done(this.got_update);
			$('#editreg').hide();
		},

		edit_delete() {
			$.ajax({
				url: "/api/sys/idmatch/" + this.edit_id,
				method: "DELETE",
			}).done(this.got_update);
			$('#editreg').hide();
		},
			
	},

	mounted() {
		this.init();
	}
}
</script>
