<template>
	<FormControl
		v-bind="$attrs"
		type="autocomplete"
		:label="label"
		:options="autocompleteOptions"
		:modelValue="modelValue"
		:placeholder="placeholder"
		@update:query="onQuery"
		@update:model-value="
			option => {
				if (option?.value) {
					$emit('update:modelValue', option.value);
				} else {
					$emit('update:modelValue', undefined);
				}
			}
		"
	/>
</template>
<script>
import { FormControl, debounce } from 'jingrow-ui';

export default {
	name: 'LinkControl',
	props: ['label', 'options', 'modelValue', 'placeholder'],
	emits: ['update:modelValue'],
	inheritAttrs: false,
	components: {
		FormControl
	},
	data() {
		return {
			query: '',
			currentValidValueInOptions: null
		};
	},
	resources: {
		options() {
			return {
				url: 'jcloud.api.client.search_link',
				params: {
					pagetype: this.options.pagetype,
					order_by: this.options.orderBy,
					page_length: this.options.pageLength || 10,
					filters: this.options.filters,
					query: this.query
				},
				auto: true,
				initialData: this.options.initialData || [],
				transform: data => {
					return data.map(option => ({
						label: option.label || option.value,
						description: option.label ? option.value : undefined,
						value: option.value
					}));
				}
			};
		}
	},
	methods: {
		onQuery: debounce(function (query) {
			this.query = query.trim();
		}, 500)
	},
	computed: {
		autocompleteOptions() {
			let options = this.$resources.options.data || [];
			const currentValueInOptions = options.find(
				o => o.value === this.modelValue
			);

			if (currentValueInOptions) {
				this.currentValidValueInOptions = currentValueInOptions;
			}

			if (
				this.modelValue &&
				!currentValueInOptions &&
				this.currentValidValueInOptions
			) {
				options = [this.currentValidValueInOptions, ...options];
			}

			return options;
		}
	}
};
</script>