<template>
	<div v-if="options_facility && inputs" class="row">
		<div class="col-6">
			<div class="mb-3">
				<ViewOrderableLookup :client="client" label="Lab tests" xref="S.LAB" :qocall="ien" v-model="inputs.ORDERABLE" />
			</div>
		</div>
		<div class="col-6">
			<template v-if="options_test">
				<div v-if="(options_test['CollSamp']) && (options_test['CollSamp'].items)" class="form-floating mb-3">
					<select class="form-select" v-model="inputs.SAMPLE"><option v-for="item in options_test['CollSamp'].items" :value="item.SampIEN">{{item.SampName}}</option></select>
					<label>Collect Sample</label>
				</div>
				<div v-if="(options_test['Specimens']) && (options_test['Specimens'].items)" class="form-floating mb-3">
					<select class="form-select" v-model="inputs.SPECIMEN"><option v-for="item in options_test['Specimens'].items" :value="item.value">{{item.text}}</option></select>
					<label>Specimen</label>
				</div>
				<div v-if="(options_test['Urgencies']) && (options_test['Urgencies'].items)" class="form-floating mb-3">
					<select class="form-select" v-model="inputs.URGENCY"><option v-for="item in options_test['Urgencies'].items" :value="item.value">{{item.text}}</option></select>
					<label>Urgency</label>
				</div>
			</template>
		</div>
		<div class="col-3">
			<div class="form-floating mb-3">
				<select class="form-select" v-model="inputs.COLLECT"><option v-for="item in options_facility['Collection Types'].items" :value="item.value" :selected="item.default">{{item.text}}</option></select>
				<label>Collection Type</label>
			</div>
		</div>
		<div class="col-3">
			<div class="mb-3">
				<template v-if="(inputs.COLLECT == 'LC') && (options_facility['Lab Collection Times'])">
					<Autocomplete label="Lab Collection Time" :items="Object.keys(mapping_START)" v-model="inputs.START" />
				</template>
				<template v-else-if="(inputs.COLLECT == 'WC') && (options_facility['Ward Collection Times'])">
					<Autocomplete label="Ward Collection Time" :items="Object.keys(mapping_START)" v-model="inputs.START" />
				</template>
				<template v-else-if="(inputs.COLLECT == 'SP') && (options_facility['Send Patient Times'])">
					<Autocomplete label="Send Patient Time" :items="Object.keys(mapping_START)" v-model="inputs.START" />
				</template>
				<template v-else>
					<label>Collection Date/Time</label>
					<DateTimePicker v-model="inputs.START" />
				</template>
			</div>
		</div>
		<div class="col-3">
			<div class="form-floating mb-3">
				<select class="form-select" v-model="inputs.SCHEDULE"><option v-for="item in options_facility['Schedules'].items" :value="item.value" :selected="item.default">{{item.text}}</option></select>
				<label>How Often?</label>
			</div>
		</div>
		<div class="col-3">
			<div class="form-floating mb-3" title="Enter a number of days, or an 'X' followed by a number of times.">
				<input type="text" class="form-control" placeholder=" " v-model="inputs.DAYS" />
				<label>How Long?</label>
			</div>
		</div>
		<div class="col-9">
			<div v-if="preview" class="card mb-3" style="background-color: #fdfbd7;"><div class="card-body" style="font-family: monospace; white-space: pre-wrap;">{{preview}}</div></div>
			<div v-if="(options_test) && (options_test['CollSamp']) && (options_test['CollSamp'].text)" class="card mb-3" style="background-color: #fdfbd7;"><div class="card-body" style="font-family: monospace; white-space: pre-wrap;">{{options_test['CollSamp'].text}}</div></div>
		</div>
		<div class="col-3">
			<div class="btn-group-vertical mb-3" style="width: 100%;">
				<button type="button" class="btn btn-primary" @click="e => $emit('submit', output)">Submit</button>
				<button type="button" class="btn btn-danger" @click="e => $emit('cancel')">Cancel</button>
			</div>
		</div>
	</div>
</template>

<script>
	import { debounce } from './util.mjs';

	import ViewOrderableLookup from './ViewOrderableLookup.vue';
	import Autocomplete from './Autocomplete.vue';
	import DateTimePicker from './DateTimePicker.vue';

	export default {
		components: {
			ViewOrderableLookup, Autocomplete, DateTimePicker
		},
		props: {
			client: Object,
			ien: String,
			dlgdef: Object,
			bldqrsp: Object,
			modelValue: Object
		},
		emits: [
			'submit',
			'cancel',
			'update:modelValue'
		],
		data() {
			return {
				inputs: null,
				options_facility: null,
				options_test: null
			};
		},
		computed: {
			mapping_START() {
				if((this.inputs) && (this.inputs.COLLECT) && (this.options_facility)) {
					var mapping = this.inputs.COLLECT == 'LC' ? this.options_facility['Lab Collection Times'] : this.inputs.COLLECT == 'WC' ? this.options_facility['Ward Collection Times'] : this.inputs.COLLECT == 'SP' ? this.options_facility['Send Patient Times'] : null;
					if((mapping) && (mapping.items)) return mapping.items.reduce((acc, val) => (acc[val.text] = val.value.substring(1), acc), {});
				}
			},
			preview() {
				if((this.options_test) && (this.inputs)) {
					var res = [], inputs = this.inputs, x;
					if(this.options_test['Test Name']) res.push(this.options_test['Test Name'].default);
					if((inputs.SAMPLE) && (this.options_test['CollSamp']) && (x = this.options_test['CollSamp'].items.find(x => x.SampIEN == inputs.SAMPLE))) res.push(x.SampName.replace(/^\s+|\s+$/g, ''));
					if((inputs.SPECIMEN) && (this.options_test['Specimens']) && (x = this.options_test['Specimens'].items.find(x => x.value == inputs.SPECIMEN))) res.push(x.text.replace(/^\s+|\s+$/g, ''));
					if(inputs.COLLECT) res.push(inputs.COLLECT);
					return res.join(' ');
				}
			},
			output() {
				if((this.dlgdef) && (this.inputs)) {
					var inputs = Object.assign({}, this.inputs);
					if((this.mapping_START) && (inputs.START) && (this.mapping_START.hasOwnProperty(inputs.START))) inputs.START = this.mapping_START[inputs.START];
					return this.dlgdef.reduce((acc, val) => (acc['"' + val.promptIEN + '","1"'] = inputs[val.promptID], acc), {});
				}
			}
		},
		created() {
			this.$watch(
				() => this.client,
				async () => {
					this.options_facility = this.client ? await this.client.ORWDLR32_DEF(0, 0) : null;
				},
				{ immediate: true }
			);
			this.$watch(
				() => (this.client, this.ien, this.dlgdef, {}),
				async () => {
					if((this.client) && (this.ien) && (this.dlgdef) && (this.bldqrsp)) {
						this.inputs = this.dlgdef.reduce((acc, val) => (acc[val.promptID] = null, acc), {});
						if((this.bldqrsp.ResponseID) && (this.bldqrsp.ResponseID != '0')) {
							var loadrsp = await this.client.ORWDX_LOADRSP(this.bldqrsp.ResponseID, 0, 0);
							if(loadrsp) Object.assign(this.inputs, loadrsp.reduce((acc, val) => (acc[val.promptID] = val.iValue, acc), {}));
						}
					} else this.inputs = null;
				},
				{ immediate: true }
			);
			this.$watch(
				() => (this.client, this.inputs && this.inputs.ORDERABLE, {}),
				async () => {
					this.options_test = (this.client) && (this.inputs) && (this.inputs.ORDERABLE) ? await this.client.ORWDLR32_LOAD(this.inputs.ORDERABLE) : null;
				}
			);
			this.$watch(
				() => { return { dlgdef: this.dlgdef, inputs: this.inputs }; },
				debounce(() => this.$emit('update:modelValue', this.output), 100),
				{ deep: true }
			);
		}
	};
</script>
