<template>
  <div class="el-input-number"
    :class="[
      size ? 'el-input-number--' + size : '',
      { 'is-disabled': disabled },
      { 'is-without-controls': !controls},
      { 'is-controls-right': controlsAtRight }
    ]"
  >
    <el-input
        :value="currentValue"
        @keydown.up.native.prevent="increase"
        @keydown.down.native.prevent="decrease"
        @blur="handleBlur"
        @input="debounceHandleInput"
        :disabled="disabled"
        :size="size"
        :max="max"
        :min="min"
        ref="input"
        :aria-label="ariaLabel"
        :aria-labelledby="ariaLabelledby"
    >
        <template slot="prepend" v-if="$slots.prepend">
          <slot name="prepend"></slot>
        </template>
        <template slot="append" v-if="$slots.append">
          <slot name="append"></slot>
        </template>
    </el-input>
    <span
        v-if="controls"
        :tabindex="decreaseDisabled ? -1 : 0"
        :aria-disabled="!!decreaseDisabled"
        role="button"
        :aria-label="decreaseLabel"
        class="el-input-number__decrease"
        :class="{'is-disabled': decreaseDisabled}"
        @keypress.enter="handleDecrease"
        v-repeat-click="handleDecrease"
    >
      <i :class="`icon-${controlsAtRight ? 'arrow-left' : 'arrow-left'}`"></i>
    </span>
    <span
        v-if="controls"
        :tabindex="increaseDisabled ? -1 : 0"
        :aria-disabled="!!increaseDisabled"
        role="button"
        :aria-label="increaseLabel"
        class="el-input-number__increase"
        :class="{'is-disabled': increaseDisabled}"
        @keypress.enter="handleIncrease"
        v-repeat-click="handleIncrease"
    >
      <i :class="`icon-${controlsAtRight ? 'arrow-right' : 'arrow-right'}`"></i>
    </span>

  </div>
</template>
<script>
  import ElInput from '../../../packages/input';
  import { once, on } from '../../../src/utils/dom';
  import debounce from 'throttle-debounce/debounce';
  import Locale from '../../../src/mixins/locale';
  export default {
    name: 'ElInputNumber',
    mixins: [Locale],
    directives: {
      repeatClick: {
        bind(el, binding, vnode) {
          let interval = null;
          let startTime;
          const handler = () => vnode.context[binding.expression].apply();
          const clear = () => {
            if (new Date() - startTime < 100) {
              handler();
            }
            clearInterval(interval);
            interval = null;
          };

          on(el, 'mousedown', () => {
            startTime = new Date();
            once(document, 'mouseup', clear);
            clearInterval(interval);
            interval = setInterval(handler, 100);
          });
        }
      }
    },
    components: {
      ElInput
    },
    props: {
      step: {
        type: Number,
        default: 1
      },
      max: {
        type: Number,
        default: Infinity
      },
      min: {
        type: Number,
        default: -Infinity
      },
      value: {
        default: 0
      },
      disabled: Boolean,
      size: String,
      controls: {
        type: Boolean,
        default: true
      },
      controlsPosition: {
        type: String,
        default: ''
      },
      debounce: {
        type: Number,
        default: 300
      },
      increaseAriaLabel: {
        type: String
      },
      decreaseAriaLabel: {
        type: String
      },
      ariaLabelledby: {
        type: String
      },
      ariaLabel: {
        type: String
      }
    },
    data() {
      return {
        currentValue: 0
      };
    },
    watch: {
      value: {
        immediate: true,
        handler(value) {
          let newVal = Number(value);
          if (isNaN(newVal)) return;
          if (newVal >= this.max) newVal = this.max;
          if (newVal <= this.min) newVal = this.min;
          this.currentValue = newVal;
          this.$emit('input', newVal);
        }
      }
    },
    computed: {
      decreaseLabel() {
        if (this.controlsAtRight) {
          return this.increaseAriaLabel || this.t('message.button.toIncrease') || 'Click button to increase the number';
        } else {
          return this.decreaseAriaLabel || this.t('message.button.toDecrease') || 'Click button to decrease the number';
        }
      },
      increaseLabel() {
        if (this.controlsAtRight) {
          return this.decreaseAriaLabel || this.t('message.button.toDecrease') || 'Click button to decrease the number';
        } else {
          return this.increaseAriaLabel || this.t('message.button.toIncrease') || 'Click button to increase the number';
        }
      },
      minDisabled() {
        return this._decrease(this.value, this.step) < this.min;
      },
      maxDisabled() {
        return this._increase(this.value, this.step) > this.max;
      },
      decreaseDisabled() {
        return this.controlsAtRight ? this.maxDisabled : this.minDisabled;
      },
      increaseDisabled() {
        return this.controlsAtRight ? this.minDisabled : this.maxDisabled;
      },
      precision() {
        const { value, step, getPrecision } = this;
        return Math.max(getPrecision(value), getPrecision(step));
      },
      controlsAtRight() {
        return this.controls && this.controlsPosition === 'right';
      }
    },
    methods: {
      toPrecision(num, precision) {
        if (precision === undefined) precision = this.precision;
        return parseFloat(parseFloat(Number(num).toFixed(precision)));
      },
      getPrecision(value) {
        const valueString = value.toString();
        const dotPosition = valueString.indexOf('.');
        let precision = 0;
        if (dotPosition !== -1) {
          precision = valueString.length - dotPosition - 1;
        }
        return precision;
      },
      _increase(val, step) {
        if (typeof val !== 'number') return this.currentValue;

        const precisionFactor = Math.pow(10, this.precision);

        return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor);
      },
      _decrease(val, step) {
        if (typeof val !== 'number') return this.currentValue;

        const precisionFactor = Math.pow(10, this.precision);

        return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor);
      },
      handleIncrease() {
        if (!this.controlsAtRight) {
          this.increase();
        } else {
          this.decrease();
        }
      },
      handleDecrease() {
        if (!this.controlsAtRight) {
          this.decrease();
        } else {
          this.increase();
        }
      },
      increase() {
        if (this.disabled || this.maxDisabled) return;
        const value = this.value || 0;
        const newVal = this._increase(value, this.step);
        if (newVal > this.max) return;
        this.setCurrentValue(newVal);
      },
      decrease() {
        if (this.disabled || this.minDisabled) return;
        const value = this.value || 0;
        const newVal = this._decrease(value, this.step);
        if (newVal < this.min) return;
        this.setCurrentValue(newVal);
      },
      handleBlur() {
        this.$refs.input.setCurrentValue(this.currentValue);
      },
      setCurrentValue(newVal) {
        const oldVal = this.currentValue;
        if (newVal >= this.max) newVal = this.max;
        if (newVal <= this.min) newVal = this.min;
        if (oldVal === newVal) {
          this.$refs.input.setCurrentValue(this.currentValue);
          return;
        }
        this.$emit('change', newVal, oldVal);
        this.$emit('input', newVal);
        this.currentValue = newVal;
      },
      handleInput(value) {
        if (value === '') {
          return;
        }
        const newVal = Number(value);
        if (!isNaN(newVal)) {
          this.setCurrentValue(newVal);
        } else {
          this.$refs.input.setCurrentValue(this.currentValue);
        }
      }
    },
    created() {
      this.debounceHandleInput = debounce(this.debounce, value => {
        this.handleInput(value);
      });
    }
  };
</script>
