<template>
	<div class="ml-2">
		<v-switch
			v-model="innerValue"
			:error="errorI"
			:messages="(errorsI ?? []).map(l => l.$message)"
			hide-details="auto"
			:readonly="readonly"
			:variant="variantOverride ? variantOverride : readonly ? 'underlined' : 'filled'"
			:disabled="disabled"
			:hint="$attrs.hint"
			:label="$attrs.label"
			:color="color"
			density="compact"
			@update:modelValue="innerValueUpdate"
		>
			<!-- <template v-slot:details>
				<div
					v-for="error of errorsI"
					:key="error.$uid"
				>
					<strong>{{ error.$message }}</strong>
				</div>
			</template> -->
		</v-switch>
	</div>
</template>

<script>
import { useBaseControlEditComponent } from '@thzero/library_client_vue3/components/baseControlEdit';
import { useBaseControlEditProps } from '@thzero/library_client_vue3/components/baseControlEditProps';
import { useVuetifyInputProps } from '@thzero/library_client_vue3_vuetify3/components/form/inputProps';

export default {
	name: 'VtSwitchWithValidation',
	props: {
		...useBaseControlEditProps,
		...useVuetifyInputProps,
		color: {
			type: String,
			default: 'primary'
		}
	},
	setup (props, context) {
		const {
			correlationId,
			error,
			hasFailed,
			hasSucceeded,
			initialize,
			logger,
			noBreakingSpaces,
			notImplementedError,
			success,
			successResponse,
			isSaving,
			serverErrors,
			setErrors,
			convertValue,
			errorI,
			errorsI,
			hideDetails,
			innerValue,
			initValue,
			innerValueUpdate
		} = useBaseControlEditComponent(props, context);

		return {
			correlationId,
			error,
			hasFailed,
			hasSucceeded,
			initialize,
			logger,
			noBreakingSpaces,
			notImplementedError,
			success,
			successResponse,
			isSaving,
			serverErrors,
			setErrors,
			convertValue,
			errorI,
			errorsI,
			hideDetails,
			innerValue,
			initValue,
			innerValueUpdate
		};
	}
};
</script>

<style scoped>
</style>
