<template>
	<div class="dropdown-question">
		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
		<select v-model="selectedOption"
				class="form-select" 
				:id="inputId"
				:name="inputId" 
				:aria-disabled="isDisabled" 
				:disabled="isDisabled" 
				:aria-required="isRequired"
				:validationRules="validationRules" 
				@input="handleChange"
				@blur="handleBlur" >
			<option v-for="(value, name, index) in options" :value="name" :key="index">
				{{ value }}       
			</option>
		</select>
		<div v-show="errorMessage" class="row mt-2 form-test-error">
			<span role="alert">{{ errorMessage }}</span>
		</div>	
	</div>    
</template>

<script>
import { useField } from "vee-validate";

export default {
	name: "dropdown-question",
	props: {
		modelValue: String,
		inputId: String,
		options: {
			type: Object,
			required: true
		},
		isDisabled: Boolean,
		isRequired: Boolean,
		disableAutoFill: Boolean,
		validationRules: String, 
	},
	setup(props) {
		const fieldOptions = {
			type: "text",
			value: props.modelValue, 
		};

		const {
			errorMessage,
			handleBlur,
			handleChange,
			meta,
		} = useField(props.inputId, props.validationRules, fieldOptions);

		return { 
			errorMessage,
			handleBlur,
			handleChange,
			meta, 
		};
	},
	data() {
		return {
			questionText: "",
		}
	},
	methods: {
		initializeComponent(cmsContent) {
			this.questionText = cmsContent;
		}
	},    
	computed: {
		selectedOption: {
			get: function() {
				return this.modelValue;
			},
			set: function(newValue) {
				this.$emit("update:modelValue", newValue);
			}
		}, 
		labelText: {
			get: function () {
				let labelText = this.questionText;
				if (this.disableAutoFill) {
					const noBreakChar = "&NoBreak;";
					const position = 1;
					labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
				}

				return labelText;
			}
		}
	},
	watch: {
		selectedOption(newValue) {
			this.handleChange(newValue);
		}
	}
};
</script>

<style lang="scss">
.dropdown-question {
	label {
		color: $black;
	}
	.form-label {
		margin-bottom: .25rem;
	}
	.form-select {
		color: $gray-600;
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
		border: 1px solid $gray-500;
		border-radius: .5rem;
		min-height: 3rem;
		&:focus,
		&:focus-visible {
			box-shadow: 0 0 0 2.5px $blue;
		}
		&:disabled,
		&.disabled {
			background-color: $gray-100;
			filter: grayscale(100%);
			&:hover {
				box-shadow: 0 0 0 4px transparent;
				border: 1px solid $gray-500;
			}
		}
		&:hover {
			border: 1px solid $gray-500;
			box-shadow: 0 0 0 4px $blue-300;
		}
	}
}
</style>


