<template>
    <div :class="['input__bottomLine__wrapper', { 'input__bottomLine__disabled':disabled }]">
        <transition name="errorTransition" mode="out-in">
            <div class="input__bottomLine input__hint" v-if="hint && !showError">
                <HintIcon noHover :iconColor="hintColor"/>
                {{ hint }}
            </div>
            <div class="input__bottomLine input__error" v-if="showError">
                <ErrorIcon noHover :iconColor="errorColor"/>
                {{ errorText }}
            </div>
        </transition>
    </div>
</template>

<script lang="ts">
    import {isValid, validate} from "../../../../utils/validation";
    import Vue from "vue";
    import HintIcon from "../../../icons/formIcons/HintIcon.vue";
    import ErrorIcon from "../../../icons/formIcons/ErrorIcon.vue";
    // @ts-ignore
    import themeVariables from "../../../../assets/scss/colors.scss";

    export default Vue.extend({
        name: "InputBottomLine",
        components: {
            HintIcon,
            ErrorIcon,
        },
        props: {
            rules: Array,
            hint: String,
            value: {
                type: [String, Number, Object, Array],
                required: true,
            },
            disabled: Boolean,
        },
        data() {
            return {
                valueWasChanged: false,
                errorColor: themeVariables.warning,
                hintColor: themeVariables.gray100,
            };
        },
        computed: {
            isValid(): boolean {
                return isValid(this.value, this.rules);
            },
            errorText(): string {
                return validate(this.value, this.rules);
            },
            showError(): boolean {
                return this.valueWasChanged && !this.isValid;
            },
        },
        watch: {
            value() {
                this.validate();
            },
        },
        methods: {
            validate(): void {
                this.valueWasChanged = true;
                this.$emit('validate', this.showError);
            },
        },

    });
</script>

<style scoped lang="scss">
    @import "inputBottomLine";
</style>
