<template>
	<v-row tag="form" @submit.prevent="onSubmit($v)">
		<!-- <pre>vuelidate: {{ $v.form }}</pre> -->
		<v-col cols="12">
			<v-text-field
				v-model.trim="form.token"
				:error="$v.form.token.$dirty && $v.form.token.$error"
				:error-messages="getErrors($v.form.token)"
				hide-details="auto"
				label="code"
				placeholder="Code*"
				variant="outlined"
				required
				type="text"
				@blur="$v.form.token.$touch()"
			></v-text-field>
		</v-col>

		<v-col cols="12">
			<v-btn
				:loading="loading"
				class="p-0"
				size="large"
				type="submit"
				variant="outlined"
			>
				submit
			</v-btn>
		</v-col>
	</v-row>
</template>

<script>
const { useVuelidate } = Vuelidate;
const { required } = VuelidateValidators;

export default {
	inheritAttrs: false,
	setup() {
		return { $v: useVuelidate() };
	},
	validations: {
		form: {
			token: {
				required,
			},
		},
	},
	props: {
		logged: {
			type: Boolean,
			default: false,
		},
		loading: {
			type: Boolean,
			default: false,
		},
		modelValue: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			form: {},
			showPassword: false,
		};
	},
	watch: {
		form: {
			handler(val) {
				this.$emit("update:modelValue", val);
			},
			deep: true,
		},
		modelValue: {
			handler(val) {
				this.form = val;
			},
			immediate: true,
		},
	},
	methods: {
		onSubmit($v) {
			$v.form.$touch();
			if ($v.form.$invalid) return false;
			this.$emit("submit", this.form);
		},
		getErrors($v) {
			if ($v.$dirty && $v.$errors?.length)
				return $v.$errors.map((e) => {
					switch (e.$validator) {
						case "sameAs":
							return "Passwords do not match";
						default:
							return e.$message;
					}
				});
			else return [];
		},
	},
};
</script>
