<template>
	<select
		v-model="selectedOption"
		class="wcc-select"
		@input="
			(event) => {
				$emit('input', event.target.value);
			}
		"
	>
		<option
			v-for="option in options"
			v-bind:key="getOptionKey(option)"
			:value="getOptionKey(option)"
		>
			{{ getOptionLabel(option) }}
		</option>
	</select>
</template>

<script>
export default {
	name: "Select",

	props: {
		value: null,
		options: {
			type: [Object, Array],
			required: true,
		},
		placeholder: {
			type: String,
			Default: "",
		},
		label: {
			type: String,
			default: "label",
		},
		tag: {
			type: String,
			default: "id",
		},
	},

	data() {
		return {
			selectedOption: null,
		};
	},
	mounted() {
		this.selectedOption = this.value;
	},
	methods: {
		getOptionLabel(option) {
			if (typeof option === "object") {
				if (!option[this.label]) {
					return console.warn(
						`[vue-select warn]: Label key "option.${this.label}" does not` +
							` exist in options object ${JSON.stringify(option)}.\n`
					);
				}
				return option[this.label];
			}
			return option;
		},
		getOptionKey(option) {
			if (typeof option === "object") {
				if (!Object.prototype.hasOwnProperty.call(option, this.tag)) {
					return console.warn(
						`[vue-select warn]: Label key "option.${this.tag}" does not` +
							` exist in options object ${JSON.stringify(option)}.\n`
					);
				}
				return option[this.tag];
			}
			return option;
		},
	},
	watch: {
		value: function (newValue) {
			this.selectedOption = newValue;
		},
	},
};
</script>
