<template>
	<div class="wcc-app-input" :class="{ file: 'file' === type }">
		<input
			:disabled="disabled"
			:type="type"
			:value="value"
			:placeholder="placeholder"
			:autocomplete="autocomplete"
			:readonly="readonly"
			:spellcheck="spellcheck"
			:max="'number' === type ? max : null"
			:min="'number' === type ? min : null"
			:step="'number' === type ? step : null"
			@input="$emit('input', $event.target.value)"
			@blur="$emit('blur', $event.target.value)"
			@change="$emit('change', $event.target.value)"
			@focus="$emit('focus', $event.target.value)"
			@keyup="$emit('keyup', $event)"
			@keydown="$emit('keydown', $event)"
			:id="inputId"
			class="wcc-form-control"
			:data-test-id="`wcc-input-${inputId}`"
		/>
		<slot name="wcc-input-error"></slot>
	</div>
</template>

<script>
export default {
	props: {
		value: {
			type: [String, Number],
			default: "",
		},
		placeholder: {
			type: String,
			default: "",
		},
		autocomplete: {
			type: String,
			default: "",
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		max: {
			type: Number,
			default: Number.MAX_SAFE_INTEGER,
		},
		min: {
			type: Number,
			default: Number.MIN_SAFE_INTEGER,
		},
		spellcheck: {
			type: Boolean,
			default() {
				return true;
			},
		},
		type: {
			type: String,
			default() {
				return "text";
			},
		},
		step: {
			type: Number,
			required: false,
		},
		inputId: String,
		error: {
			type: [String, Boolean],
			default() {
				return false;
			},
		},
	},
};
</script>

<style lang="scss" scoped>
@include wrap-class() {
	.wcc-input-error {
		input {
			border-color: $color-error;
			&:active,
			&:focus {
				box-shadow: 0 0 0 0.5px $color-error;
			}
		}
	}
}
</style>