<template>
	<template v-if="bare">
		<template v-if="selection">
			<button v-if="selection.display_text" class="list-group-item list-group-item-action" @click="reselect">{{selection.display_text}} [ {{selection.type}} | {{selection.IEN}} ] ({{selection.col}}, {{selection.row}})</button>
			<button v-if="selection.displayText" class="list-group-item list-group-item-action" @click="reselect">{{selection.displayText}} [ {{selection.type}} | {{selection.IEN}} ] | {{selection.windowFormId}} | {{selection.displayGroupId}}</button>
			<ViewOrderDialog v-if="(dfn) && (selection.type) && ((selection.type == 'D') || (selection.type == 'Q'))" :client="client" :ien="selection.IEN" :form_id="selection.windowFormId" :dfn="dfn" />
			<ViewOrderMenu v-else :key="selkey" :client="client" :ien="selection.IEN" :dfn="dfn" :bare="true" />
		</template>
		<div v-else-if="(columns) && (columns.length > 0)" class="list-group-item container">
			<div class="row">
				<div v-for="column in columns" class="col">
					<div class="list-group">
						<template v-for="item in column.values">
							<button v-if="!item.displayonly" class="list-group-item list-group-item-action" @click="selection = item">{{item.display_text}} [{{item.type}} {{item.IEN}}] ({{item.col}}, {{item.row}})</button>
							<div v-else class="list-group-item bg-light displayonly" :class="{ italic: item.displayonly == '1', bold: item.displayonly == '2' }">{{item.display_text}}</div>
						</template>
					</div>
				</div>
			</div>
		</div>
		<template v-else-if="(topmenu) && (topmenu.length > 0)">
			<template v-for="item in topmenu">
				<button v-if="item.displayText" class="list-group-item list-group-item-action" @click="selection = item">{{item.displayText}} [{{item.type}} {{item.IEN}}] | {{item.windowFormId}} | {{item.displayGroupId}}</button>
				<hr v-else />
			</template>
		</template>
	</template>
	<div v-else class="list-group">
		<button class="list-group-item list-group-item-action active" @click="reselect">Order entry</button>
		<ViewOrderMenu :key="selkey" :client="client" :ien="ien" :dfn="dfn" :bare="true" />
	</div>
</template>

<style scoped>
	.displayonly {
		cursor: default;
		white-space: pre;
	}
	.displayonly.italic {
		font-style: italic;
	}
	.displayonly.bold {
		font-weight: bold;
	}
	hr + hr {
		display: none;
	}
</style>

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

	import ViewOrderDialog from './ViewOrderDialog.vue';

	export default {
		name: 'ViewOrderMenu',
		components: {
			ViewOrderDialog
		},
		props: {
			client: Object,
			ien: String,
			dfn: String,
			bare: {
				default: false
			}
		},
		data() {
			return {
				topmenu: null,
				submenu: null,
				selection: null,
				selkey: 0
			};
		},
		computed: {
			columns() {
				return (this.submenu) && (this.submenu.children.length) ? groupByArray(this.submenu.children, 'col').sort((a, b) => a.col - b.col).map(col => (col.values.sort((a, b) => a.row - b.row), col)) : [];
			}
		},
		watch: {
			ien: {
				async handler(value) {
					if(this.bare) {
						if(value) this.submenu = await client.ORWDXM_MENU(value);
						else this.topmenu = await this.client.ORWDX_WRLST();
					}
				}, immediate: true
			}
		},
		methods: {
			reselect() {
				this.selkey++;
			}
		}
	};
</script>
