<template>
	<div v-if="prompts">
		<div class="row">
			<template v-for="item in prompts">
				<template v-if="(item.hid == '1') || (item.type == 'H')"></template>
				<div v-else-if="(odslct) && (odslct[item.id]) && (odslct[item.id].items)" class="col-12">
					<div class="card mb-3">
						<div class="card-header">{{item.prompt.replace(/\:\s*$/, '')}}</div>
						<ul class="list-group list-group-flush" style="max-height: 25vh; overflow-y: auto;"><li v-for="item in odslct[item.id].items" class="list-group-item"><input class="form-check-input me-1" type="checkbox" /> {{item}}</li></ul>
						<div v-if="item.help" class="card-footer form-text">{{item.help}}</div>
					</div>
				</div>
				<div v-else-if="item.type == 'P'" class="col-12">
					<div class="card mb-3">
						<ViewLocationLookup :client="client" :dfn="dfn" :label="item.prompt.replace(/\:\s*$/, '')" />
						<div v-if="item.help" class="form-text">{{item.help}}</div>
					</div>
				</div>
				<div v-else-if="item.type == 'Y'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
					<div class="form-check form-switch mb-3">
						<input class="form-check-input" type="checkbox" role="switch" v-model="inputs[item.id]" />
						<label class="form-check-label">{{item.prompt.replace(/\:\s*$/, '')}}</label>
						<div v-if="item.help" class="form-text">{{item.help}}</div>
					</div>
				</div>
				<div v-else-if="item.type == 'R'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
					<div class="mb-3">
						<label class="form-label">{{item.prompt.replace(/\:\s*$/, '')}}</label>
						<DateTimePicker dateonly v-model="inputs[item.id]" />
						<div v-if="item.help" class="form-text">{{item.help}}</div>
					</div>
				</div>
				<div v-else-if="item.type == 'N'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
					<div class="form-floating mb-3">
						<input type="number" class="form-control" :placeholder="item.default || ' '" v-model="inputs[item.id]" />
						<label>{{item.prompt.replace(/\:\s*$/, '')}}</label>
						<div v-if="item.help" class="form-text">{{item.help}}</div>
					</div>
				</div>
				<div v-else-if="item.type == 'W'" class="col-12">
					<div class="card mb-3" style="background-color: #fdfbd7;">
						<div class="card-header">{{item.prompt.replace(/\:\s*$/, '')}}</div>
						<div class="card-body" style="font-family: monospace; white-space: pre;">{{item.detail}}</div>
					</div>
				</div>
				<div v-else class="col col-12">
					<div class="form-floating mb-3">
						<input type="text" class="form-control" :placeholder="item.default || ' '" :disabled="item.type == 'P'" v-model="inputs[item.id]" />
						<label>{{item.prompt.replace(/\:\s*$/, '')}}</label>
						<div v-if="item.help" class="form-text">{{item.help}}</div>
					</div>
				</div>
			</template>
		</div>
		<div v-if="(odslct) && (odslct.Info) && (odslct.Info.text)" class="card mb-3" style="background-color: #fdfbd7;"><div class="card-body" style="font-family: monospace; white-space: pre;">{{odslct.Info.text}}</div></div>
		<div class="btn-group mb-3">
			<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>
</template>

<script>
	import ViewLocationLookup from './ViewLocationLookup.vue';
	import DateTimePicker from './DateTimePicker.vue';

	export default {
		components: {
			ViewLocationLookup, DateTimePicker
		},
		props: {
			client: Object,
			ien: String,
			dfn: String,
			location_ien: String,
			dlgname: Object,
			dlgdef: Object,
			modelValue: Object
		},
		emits: [
			'submit',
			'cancel',
			'update:modelValue'
		],
		data() {
			return {
				prompts: null,
				inputs: null,
				odslct: null
			};
		},
		computed: {
			output() {
				if((this.dlgdef) && (this.prompts) && (this.inputs)) {
					return this.dlgdef.reduce((acc, val) => (acc['"' + val.promptIEN + '","1"'] = this.inputs[val.promptID] || this.prompts[val.promptID].idflt, acc), {});
				}
			}
		},
		created() {
			this.$watch(
				() => (this.client, this.ien, this.dlgdef, {}),
				async () => {
					var bldqrsp, loadrsp;
					if((this.client) && (this.ien) && (this.dlgdef) && (bldqrsp = (await this.client.ORWDXM1_BLDQRSP(this.ien, '^^^^^^;;;^^^^', 0, 0))[0])) {
						this.inputs = this.dlgdef.reduce((acc, val) => (acc[val.promptID] = null, acc), {});
						this.prompts = await client.ORWDXM_PROMPTS(this.dlgname.BaseDialogIEN);
						if(this.prompts) Object.assign(this.inputs, this.prompts.reduce((acc, val) => (acc[val.id] = val.default, acc), {}));
						if((bldqrsp.ResponseID) && (bldqrsp.ResponseID != '0')) {
							loadrsp = await this.client.ORWDX_LOADRSP(bldqrsp.ResponseID, 0, 0);
							if(loadrsp) Object.assign(this.inputs, loadrsp.reduce((acc, val) => (acc[val.promptID] = val.iValue, acc), {}));
						}
					} else this.prompts = this.inputs = null;
				},
				{ immediate: true }
			);
		}
	};
</script>
