<template>
	<base-input
		type="number"
		:class="{
			'wcc-input-error': hasErrors,
		}"
		v-model="banner.properties.settings.consentExpiry.value"
		:min="min"
		:max="limit"
		@input="(value) => checkForErrors(value)"
	>
		<template slot="wcc-input-error" v-if="hasErrors">
			<div class="wcc-input-error-container">
				<div
					class="wcc-input-inline-error"
					v-for="(value, key) in errors"
					v-bind:key="key"
				>
					<template v-if="value === true">{{ errorMessages[key] }}</template>
				</div>
			</div>
		</template>
	</base-input>
</template>

<script>
import banners from "@/modules/banners/helpers/utils";

export default {
	name: "BannerExpiry",
	components: {},
	props: {
		limit: {
			type: Number,
			default: 730,
		},
		min: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			errors: {},
			errorMessages: {
				maxLimit: this.$i18n.__(
					"Please enter a value between 0 and 730",
					"webtoffee-cookie-consent"
				),
			},
		};
	},
	methods: {
		checkForErrors(value) {
			this.errors = {};
			if (value === '' || value > this.limit || value < this.min) {
				this.errors["maxLimit"] = true;
			}
			banners.setErrors(this.errors);
		},
	},
	computed: {
		banner() {
			return this.$store.state.banners.current;
		},
		hasErrors() {
			return Object.keys(this.errors).length;
		},
	},
};
</script>