<template>
    <InputTemplate
        ref="inputTemplate"
        :label="label"
        :rules="rules"
        :placeholder="placeholder"
        :required="required"
        :hint="hint"
        :disabled="disabled"
        :small="small"
        :errorMessage="errorMessage"
        :validationHint="validationHint"
        :inputColor="inputColor"
        :labelWithoutColon="labelWithoutColon"
        :large="large"
        :value="inputValue"
        :withPrependContent="showPrependContent"
    >
        <div class="input__content"
             @click="focusElement"
             @mouseenter="onMouseEnter"
             @mouseleave="onMouseLeave">
            <div class="input__prepend" v-if="showPrependContent">
                <slot name="prepend">
                </slot>
                <slot name="prefix">
                </slot>
            </div>
            <div class="input__inner">
                <input ref="input"
                       v-bind="{...$props, ...$attrs}"
                       v-model="inputValue"
                       @focus="onFocus"
                       @blur="onBlur"
                       :type="inputType"
                />
            </div>
            <div class="input__password" v-if="type === 'password'">
                <div v-if="showPassword" @click="showPassword = !showPassword">
                    <EyeIconHide noHover :iconColor="themeVariables.gray60"/>
                </div>
                <div v-else @click="showPassword = !showPassword">
                    <EyeIconShow noHover :iconColor="themeVariables.gray60"/>
                </div>
            </div>
        </div>
    </InputTemplate>
</template>
<script lang="ts">
    import mixins from "vue-typed-mixins";
    import InputTemplate from "../inputTemplate/InputTemplate.vue";
    import EyeIconShow from "../../icons/formIcons/EyeIconShow.vue";
    import EyeIconHide from "../../icons/formIcons/EyeIconHide.vue";
    import inputMixin from "../mixins/inputMixin";

    export default mixins(inputMixin).extend({
        name: "InputComponent",
        props: {
            type: {
                type: String,
                default: 'text',
            },
        },
        extends: InputTemplate,
        components: {
            InputTemplate,
            EyeIconShow,
            EyeIconHide,
        },
        mixins: [
            inputMixin,
        ],
        data() {
            return {
                showPassword: false,
            };
        },
        computed: {
            showPrependContent(): boolean {
                return !!this.$slots.prepend || !!this.$slots.prefix;
            },
            inputType(): string {
                if (this.type === 'password') {
                    return this.showPassword ? 'text' : 'password';
                } else {
                    return this.type;
                }
            },
        },
        methods: {
            onInput(value: any) {
                this.$emit('input', value);
            },
        },
    });
</script>
<style scoped lang="scss">
</style>
