// App.vue
<template>
	<div>
		<p class="cdx-docs-demo-text">
			Selected value: {{ selection }}
		</p>

		<cdx-lookup
			v-model:selected="selection"
			:menu-items="menuItems"
			:menu-config="menuConfig"
			aria-label="Lookup with suggested items demo"
			@input="onInput"
		>
			<!-- <template #no-results>
				No results found.
			</template> -->
		</cdx-lookup>
	</div>
</template>

<script>
const { ref, defineComponent } = require( 'vue' );
// Codex is available from ResourceLoader at runtime and is available without needing a build step.
const { CdxLookup } = require( '../../codex.js' );
const vegetableItems = [
	{
		label: 'potato',
		description: 'root vegetable',
		value: 'Q10998'
	},
	{
		label: 'carrot',
		description: 'root vegetable, usually orange in color',
		value: 'Q81',
		tag: 'limited support'
	},
	{
		label: 'zucchini',
		description: 'Edible summer squash, typically green in colour',
		value: 'Q7533'
	},
	{
		label: 'eggplant',
		description: 'plant species Solanum melongena',
		value: 'Q7540'
	},
	{
		label: 'broccoli',
		description: 'edible green plant in the cabbage family',
		value: 'Q47722'
	},
	{
		label: 'cauliflower',
		description: 'vegetable, for the plant see Q7537 (Brassica oleracea var. botrytis)',
		value: 'Q23900272'
	},
	{
		label: 'brussels sprouts',
		description: 'vegetable',
		value: 'Q150463'
	},
	{
		label: 'cassava root',
		description: 'root vegetable',
		value: 'Q43304555'
	},
	{
		label: 'plantain',
		description: 'banana-like vegetable, less sweet',
		value: 'Q165449'
	},
	{
		label: 'cabbage',
		description: 'Vegetable, the generic term for several varieties.',
		value: 'Q14328596'
	},
	{
		label: 'napa cabbage',
		description: 'a type of Chinese cabbage',
		value: 'Q13360268'
	}
];

/**
 * Codex Vue component demos.
 *
 * This app contains a tabbed layout with various Codex Vue component demos. This component is
 * written using Vue's Composition API (see https://vuejs.org/api/composition-api-setup.html).
 */
// @vue/component
module.exports = defineComponent( {
	name: 'LookupWithSuggestions',
	components: {
		CdxLookup
	},
	setup() {

		const selection = ref( null );
		// Set up an array of initial menu items to show as suggestions.
		const initialMenuItems = [
			{
				label: 'Suggested items',
				value: 'suggestion',
				disabled: true
			},
			...vegetableItems.slice( 0, 3 )
		];
		const menuItems = ref( initialMenuItems );

		const menuConfig = {
			boldLabel: true
		};

		/**
		 * Filter items on input.
		 *
		 * @param {string} value
		 */
		function onInput( value ) {
			if ( value ) {
				menuItems.value = vegetableItems.filter( ( item ) =>
					item.label.includes( value )
				);
			} else {
				// When the input is cleared, show the suggestions again.
				menuItems.value = initialMenuItems;
			}
		}

		return {
			selection,
			menuItems,
			menuConfig,
			onInput
		};
	}
} );
</script>

<style lang="less">
// To access Codex design tokens and mixins inside Vue files, import MediaWiki skin variables.
@import 'mediawiki.skin.variables.less';

.ext-codexexample-app {
	&__tab {
		padding: @spacing-100;
	}
}
</style>