<template>
    <div
        :class="bem({
            focus: focused
        })">
        <label :class="bem('label')" :for="id || __id" v-if="label">{{label}}</label>
        <slot name="prepend"/>
        <input
            v-on="ignoreListeners(['input', 'change', 'focus', 'blur'])"
            v-bind="$$attrs"
            :id="id || __id"
            :class="bem('inner')"
            :placeholder="placeholder"
            :type="type"
            :autocomplete="autocomplete"
            :value="privateValue"
            @input="handleInput"
            @change="handleChange"
            @focus="handleFocus"
            @blur="handleBlur"
            @keypress.enter="handleEnter"
        >
        <slot name="append"/>
    </div>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';
import Textarea from './Textarea';

let id = 0;

export default {
    Textarea,
    name: createComponentName('input'),
    mixins: [componentMixin],
    model: {
        name: 'value',
        event: 'input',
    },
    props: {
        value: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: 'text'
        },
        id: {
            type: String,

        },
        autocomplete: {
            type: String,
            default: 'off'
        },
        placeholder: {
            type: String,
            default: ''
        },
        label: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            privateValue: this.$hasProp('value') ? this.value : this.$hasProp('defaultValue') ? this.defaultValue : '',
            textareaCalcStyle: {},
            prefixOffset: null,
            suffixOffset: null,
            hovering: false,
            focused: false,
            isError: false,
        };
    },
    watch: {
        value(v) {
            this.privateValue = v;
        }
    },
    created() {
        if (!this.$hasProp('id')) {
            this.__id = 'gd-input-id-' + id++;
        }
    },
    methods: {
        handleInput(event) {
            const value = event.target.value;
            this.privateValue = value;
            this.$emit('input', value, event);
        },
        handleBlur(event) {
            this.focused = false;
            this.$emit('blur', event);
        },
        handleFocus(event) {
            this.focused = true;
            this.$emit('focus', event);
        },
        handleChange(event) {
            const value = event.target.value;
            this.privateValue = value;
            this.$emit('change', value, event);
        },
        handleEnter(event) {
            this.handleInput(event);
            this.handleChange(event);
            this.$emit('enter', event);
        },
    }
};
</script>

<style lang="less">
@import '../_styles/base.less';

@input: ~'@{prefix}-input';

.@{input} {
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: @margin-sm @margin-base;
    font-size: 14px;
    overflow: hidden;
    height: 45px;
    position: relative;
    line-height: 1.2;


    &--focus {
        border-color: #6C788C;
    }


    & > * {
        flex-shrink: 0;
    }

    &__inner {
        background-color: inherit;
        flex-shrink: 1;
        color: inherit;
        width: 100%;
        box-sizing: border-box;
        outline:none;
        border: none;
        font-size: inherit;
        padding: 0;
    }



    & > * + * {
        margin-left: 14px;
    }

    &__label {
        color: inherit;
        font-weight: 500;
        flex: 0 0 auto;
        min-width: 36px;
    }


    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        box-shadow: 0 0 0 1000px #fff inset;
    }
    input[type=text]:focus, input[type=password]:focus, textarea:focus {
        box-shadow: 0 0 0 1000px inset inset;
    }
}

</style>
