<template>
  <s-input-frame
    class="s-input row no-wrap"

    :prefix="prefix"
    :suffix="suffix"
    :stack-label="stackLabel"
    :float-label="floatLabel"
    :error="error"
    :disable="disable"
    :inverted="inverted"
    :dark="dark"
    :before="before"
    :after="after"
    :color="color"

    :focused="focused"
    :length="length"
    :top-addons="isTextarea"

    @click="__onClick"
  >
    <slot name="before"></slot>

    <template v-if="isTextarea">
      <div class="col row relative-position">
        <s-resize-observable @resize="__updateArea()"></s-resize-observable>
        <textarea
          class="col s-input-target s-input-shadow absolute-top"
          ref="shadow"
          :value="value"
          :rows="minRows"
        ></textarea>

        <textarea
          ref="input"
          class="col s-input-target s-input-area"

          :name="name"
          :placeholder="inputPlaceholder"
          :disabled="disable"
          :maxlength="maxLength"
          :rows="minRows"

          :value="value"
          @input="__set"

          @focus="__onFocus"
          @blur="__onBlur"
          @keydown="__onKeydown"
          @keyup="__onKeyup"
        ></textarea>
      </div>
    </template>

    <input
      v-else
      ref="input"
      class="col s-input-target"
      :class="[`text-${align}`]"

      :name="name"
      :placeholder="inputPlaceholder"
      :pattern="pattern"
      :disabled="disable"
      :maxlength="maxLength"

      :min="min"
      :max="max"
      :step="inputStep"

      :type="inputType"
      :value="value"
      @input="__set"

      @focus="__onFocus"
      @blur="__onBlur"
      @keydown="__onKeydown"
      @keyup="__onKeyup"
    />

    <s-icon
      v-if="isPassword && !noPassToggle && length"
      slot="after"
      :name="showPass ? 'visibility' : 'visibility_off'"
      class="s-if-control"
      @click="togglePass"
    ></s-icon>

    <s-icon
      v-if="clearable && length"
      slot="after"
      name="cancel"
      class="s-if-control"
      @click="clear"
    ></s-icon>

    <s-spinner
      v-if="isLoading"
      slot="after"
      size="24px"
      class="s-if-control"
    ></s-spinner>

    <slot name="after"></slot>
    <slot></slot>
  </s-input-frame>
</template>

<script>
import FrameMixin from '../input-frame/input-frame-mixin'
import InputMixin from '../input/input-mixin'
import inputTypes from './input-types'
import { frameDebounce } from '../utils/debounce'
import { between } from '../utils/format'
import { QInputFrame } from '../input-frame'
import { QResizeObservable } from '../observables'
import { QSpinner } from '../spinner'

export default {
  name: 's-input',
  mixins: [FrameMixin, InputMixin],
  components: {
    QInputFrame,
    QSpinner,
    QResizeObservable
  },
  props: {
    value: { required: true },
    type: {
      type: String,
      default: 'text',
      validator: t => inputTypes.includes(t)
    },
    minRows: Number,
    clearable: Boolean,
    noPassToggle: Boolean,

    min: Number,
    max: Number,
    step: {
      type: Number,
      default: 1
    },
    maxDecimals: Number,
    disable: Boolean
  },
  data () {
    return {
      focused: false,
      showPass: false,
      shadow: {
        val: this.value,
        set: this.__set,
        loading: false,
        hasFocus: () => {
          return document.activeElement === this.$refs.input
        },
        register: () => {
          this.watcher = this.$watch('value', val => {
            this.shadow.val = val
          })
        },
        unregister: () => {
          this.watcher()
        },
        getEl: () => {
          return this.$refs.input
        }
      }
    }
  },
  provide () {
    return {
      __input: this.shadow
    }
  },
  computed: {
    isNumber () {
      return this.type === 'number'
    },
    isPassword () {
      return this.type === 'password'
    },
    isTextarea () {
      return this.type === 'textarea'
    },
    isDate () {
      return this.type === 'date'
    },
    isDateTime () {
      return this.type === 'datetime'
    },
    isLoading () {
      return this.loading || this.shadow.loading
    },
    pattern () {
      if (this.isNumber) {
        return '[0-9]*'
      }
    },
    inputStep () {
      if (this.isNumber) {
        return this.step
      }
    },
    inputType () {
      return this.isPassword
        ? (this.showPass ? 'text' : 'password')
        : this.type
    },
    length () {
      return this.value
        ? ('' + this.value).length
        : 0
    }
  },
  methods: {
    togglePass () {
      this.showPass = !this.showPass
    },
    clear () {
      if (!this.disable) {
        this.$emit('input', '')
        this.$emit('change', '')
      }
    },

    __set (e) {
      let val = e.target ? e.target.value : e
      if (val !== this.value) {
        if (this.isNumber) {
          if (val === '') {
            val = null
          }
          else {
            val = Number.isInteger(this.maxDecimals)
              ? parseFloat(val).toFixed(this.maxDecimals)
              : parseFloat(val)
          }
        }
        this.$emit('input', val)
        this.$emit('change', val)
      }
    },
    __updateArea () {
      const shadow = this.$refs.shadow
      if (shadow) {
        let h = shadow.scrollHeight
        const max = this.maxHeight || h
        this.$refs.input.style.minHeight = `${between(h, 19, max)}px`
      }
    }
  },
  mounted () {
    this.__updateArea = frameDebounce(this.__updateArea)
    if (this.isTextarea) {
      this.__updateArea()
      this.watcher = this.$watch('value', this.__updateArea)
    }
  },
  beforeDestroy () {
    if (this.watcher !== void 0) {
      this.watcher()
    }
  }
}
</script>
