'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var normalizeComponent = require('./normalize-component-6fa50395.js');
var ThemeMixin = require('./ThemeMixin-a2f817cd.js');
var inputAtom = require('./input-atom-9431266a.js');
var errorAtom = require('./error-atom-2f5dc7b9.js');

var script = {
  name: 'VCodeInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isCentered: {
      type: Boolean,
      default: true
    },
    length: {
      type: Number,
      default: 6
    },
    interval: {
      type: Number,
      default: 3
    },
    error: {
      type: String,
      default: ''
    }
  },
  data: function data() {
    return {
      numbers: []
    };
  },
  computed: {
    vCodeInputCssClass: function vCodeInputCssClass() {
      return ThemeMixin._objectSpread2(ThemeMixin._objectSpread2({}, this.themeCssClass), {}, {
        'v-code-input': true,
        'is-centered': this.isCentered
      });
    },
    errorCss: function errorCss() {
      return this.isCentered ? 'v-text-center' : '';
    },
    inputValue: function inputValue() {
      return this.numbers.join('');
    },
    isError: function isError() {
      return !!this.error;
    }
  },
  watch: {
    value: function value(val) {
      if (val !== this.inputValue) {
        this.fillNumbers(val);
      }
    },
    numbers: {
      deep: true,
      handler: function handler() {
        this.$emit('input', this.inputValue);
      }
    }
  },
  methods: {
    isNeedSeparator: function isNeedSeparator(idx) {
      var numbers = this.numbers,
          interval = this.interval;
      if (idx === 0 || idx === numbers.length) return false;
      return idx % interval === 0;
    },
    fillNumbers: function fillNumbers(value) {
      var _this = this;

      var splittedValue = value.split('').slice(0, this.length);
      var emptyNumbers = new Array(this.length - splittedValue.length).fill('');
      splittedValue.concat(emptyNumbers).forEach(function (value, idx) {
        _this.setNumberValueByIndex(idx, value);
      });
    },
    focusNumberByIdx: function focusNumberByIdx(idx) {
      if (!this.$refs.root) {
        return;
      }

      var input = this.$refs.root.querySelector("[data-index=\"".concat(idx, "\"]"));

      if (input) {
        input.focus();
      }
    },
    onKeyDown: function onKeyDown(e) {
      if (e.key !== 'Backspace' || e.target.value) {
        return;
      }

      e.preventDefault();
      var idx = this.getIndex(e);
      this.handleBackspace(idx);
      this.setNumberValueByIndex(idx - 1, '');
    },
    onPasteNumber: function onPasteNumber(e) {
      e.preventDefault();
      var pasteData = (e.clipboardData || window.clipboardData).getData('text');
      if (!pasteData) return;
      this.fillNumbers(pasteData);
      this.focusNumberByIdx(pasteData.length);
    },
    handleBackspace: function handleBackspace(idx) {
      if (idx === 0) return;
      this.setNumberValueByIndex(idx, '');
      this.focusNumberByIdx(idx - 1);
    },
    handleInsertText: function handleInsertText(idx, value) {
      this.setNumberValueByIndex(idx, value);
      this.focusNumberByIdx(idx + 1);
    },
    onInput: function onInput(e) {
      var idx = this.getIndex(e);
      var value = "".concat(e.target.value).split('').pop();

      switch (e.inputType) {
        case 'insertText':
        case 'insertCompositionText':
          this.handleInsertText(idx, value);
          break;

        case 'deleteContentBackward':
          this.handleBackspace(idx);
          break;
      }
    },
    getIndex: function getIndex(e) {
      var idx = e.target.getAttribute('data-index') - 0;
      return idx;
    },
    setNumberValueByIndex: function setNumberValueByIndex(idx, value) {
      this.$set(this.numbers, idx, value);
    }
  },
  mounted: function mounted() {
    this.fillNumbers(this.value);
  },
  mixins: [ThemeMixin.ThemeMixin],
  components: {
    ErrorAtom: errorAtom.ErrorAtom,
    InputAtom: inputAtom.InputAtom
  },
  model: {
    event: 'input',
    prop: 'value'
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"root",class:_vm.vCodeInputCssClass},[_c('ul',{staticClass:"v-code-input-container",on:{"input":_vm.onInput}},[_vm._l((_vm.numbers),function(numberValue,idx){return [_c('li',{key:("input-" + idx),staticClass:"v-code-input-item"},[_c('input-atom',{staticClass:"v-code-input-number",attrs:{"value":numberValue,"disabled":_vm.disabled,"type":"number","placeholder":"0","maxlength":"1","data-index":idx,"is-error":_vm.isError},on:{"paste":_vm.onPasteNumber},nativeOn:{"keydown":function($event){return _vm.onKeyDown($event)}}})],1),_vm._v(" "),(_vm.isNeedSeparator(idx + 1))?_c('li',{key:("separator-" + idx),staticClass:"v-code-input-item is-delimeter"}):_vm._e()]})],2),_vm._v(" "),(_vm.isError)?_c('error-atom',{class:_vm.errorCss,attrs:{"error":_vm.error}}):_vm._e()],1)};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  

  
  var VCodeInput = normalizeComponent.__vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    undefined,
    undefined
  );

exports.default = VCodeInput;
