<template>
  <FormField :status='status'>
    <input v-bind="$attrs" class="Input__el" ref="input" :placeholder="placeholder" :value="value" @input="changeHandler" @focus="focusHandler" />
  </FormField>
</template>

<script>
import getClassName from '../../helpers/getClassName';
import classnames from '../../lib/classnames'

import FormField from '../FormField/FormField'

const baseClassName = getClassName('Input')

export default {
  data: () => ({}),
  inject: {
    isWebView: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    classNames () {
      return classnames(baseClassName, {
        [`Input--${this.alignment}`]: this.alignment != 'left'
      })
    }
  },
  components: {
    FormField
  },
  props: {
    value: {
      type: [String, Number]
    },
    type: {
      type: String,
      required: false,
      default: 'text',
      validator: (v) => [
         'text', 'password',
         'date', 'datetime-local', 'time', 'month',
         'email', 'number', 'tel', 'url'].indexOf(v) >= 0
    },
    alignment: {
      type: String,
      required: false,
      default: 'left',
      validator: (v) => ['left', 'center', 'right'].indexOf(v) >= 0
    },
    placeholder: {
      type: String,
    },
    status: {
      type: String,
      required: false,
      default: 'default',
      validator: (v) => ['default', 'error', 'valid'].indexOf(v) >= 0
    }
  },
  methods: {
    changeHandler () {
      this.$emit('input', this.$refs.input.value)
    },
    focusHandler (e) {
      this.$emit('focus', e)
    }
  }
}
</script>

<style>
@import '../../styles/common.css';
</style>