<template>
    <div :class="inputClass" :style="[cssVars]">
        <div class="input__upperElements">
            <LabelComponent
                v-if="label"
                :maxWidthOfUpperElements="maxWidthOfUpperElements"
                :disabled="disabled"
                :label="label"
                :labelWithoutColon="labelWithoutColon"/>
            <ValidationHint
                v-if="validationHint"
                :validationHint="validationHint"
                :maxWidthOfUpperElements="maxWidthOfUpperElements"
                :disabled="disabled"
            />
        </div>
        <div>
            <slot>
            </slot>
        </div>
        <InputBottomLine
            ref="bottomLine"
            :disabled="disabled"
            :hint="hint"
            @validate="setValidationStatus($event)"
            :value="inputValue"
            :rules="rules"/>
    </div>
</template>

<script lang="ts">
    import LabelComponent from "./labelComponent/LabelComponent.vue";
    import InputBottomLine from "./inputBottomLine/InputBottomLine.vue";
    import ValidationHint from "./validationHint/ValidationHint.vue";
    // @ts-ignore
    import themeVariables from '../../../assets/scss/colors.scss';
    import {
        INPUT_DISABLED_CLASS,
        INPUT_FOCUSED_CLASS,
        INPUT_HOVERED_CLASS,
        INPUT_LARGE_CLASS,
        INPUT_SMALL_CLASS,
        INPUT_WITH_BOTTOM_LINE_CLASS,
        INPUT_WITH_ERROR_CLASS,
        INPUT_WITH_HINT_CLASS,
        INPUT_WITH_PREPEND_CLASS,
        INPUT_WRAPPER_CLASS,
    } from "./constants";
    import Vue from "vue";

    export default Vue.extend({
        name: "InputTemplate",
        props: {
            label: String,
            rules: Array,
            placeholder: String,
            required: Boolean,
            hint: String,
            value: {
                type: [String, Number, Object, Array],
                required: true,
            },
            disabled: {
                type: Boolean,
                default: false,
            },
            small: {
                type: Boolean,
                default: false,
            },
            errorMessage: {
                type: String,
                default: '',
            },
            validationHint: String,
            inputColor: {
                type: String,
                default: themeVariables.primary,
            },
            labelWithoutColon: {
                type: Boolean,
                default: false,
            },
            withPrependContent: {
                type: Boolean,
                default: false,
            },
            large: {
                type: Boolean,
                default: false,
            },
        },
        components: {
            LabelComponent,
            InputBottomLine,
            ValidationHint,
        },
        data() {
            return {
                showError: false,
                isFocused: false,
                isHovered: false,
                themeVariables: themeVariables,
            };
        },
        computed: {
            inputValue: {
                get(): any {
                    return this.value;
                },
                set(value: any): void {
                    this.$emit('input', value);
                },
            },
            inputClass(): any {
                return {
                    [INPUT_WRAPPER_CLASS]: true,
                    [INPUT_SMALL_CLASS]: this.small,
                    [INPUT_WITH_BOTTOM_LINE_CLASS]: !!this.hint || !!this.rules,
                    [INPUT_WITH_HINT_CLASS]: !!this.hint,
                    [INPUT_DISABLED_CLASS]: this.disabled,
                    [INPUT_WITH_ERROR_CLASS]: this.showError,
                    [INPUT_FOCUSED_CLASS]: this.isFocused,
                    [INPUT_HOVERED_CLASS]: this.isHovered,
                    [INPUT_WITH_PREPEND_CLASS]: this.withPrependContent,
                    [INPUT_LARGE_CLASS]: this.large,
                };
            },
            maxWidthOfUpperElements(): string {
                return !!this.label && !!this.validationHint ? `50%` : `100%`;
            },
            cssVars(): object {
                return {
                    '--input-color': this.inputColor,
                };
            },
            bottomLine(): any {
                // @ts-ignore
                if (this.$refs.inputTemplate && this.$refs.inputTemplate.$refs.bottomLine) {
                    // @ts-ignore
                    return this.$refs.inputTemplate.$refs.bottomLine;
                }
                return this.$refs.bottomLine;
            },
        },
        methods: {
            onChange(value: string | null): void {
                this.$emit('input', value);
            },
            setValidationStatus(showError: boolean): void {
                this.showError = showError;
            },
            validate() {
                return this.bottomLine.validate();
            },
        },
    });
</script>

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