import { IMaskDirective } from 'vue-imask';

import 'vue2-datepicker/locale/pt-br';

import maskOptions from '@assets/js/masks';

export default {
  name: 'BaseInput',
  components: {
    DatePicker: () => import(/* webpackChunkName: "DatePicker" */ 'vue2-datepicker'),
  },
  directives: {
    imask: IMaskDirective,
  },
  inheritAttrs: false,
  props: {
    name: {
      type: String,
    },
    label: {
      type: String,
    },
    description: {
      type: String,
    },
    eyeMargin: {
      type: String,
      default: 'password-view',
      validator(value) {
        return ['password-view', 'admin'].indexOf(value) !== -1;
      },
    },
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    type: {
      type: String,
      default: 'text',
    },
    value: {
      type: String | Number,
    },
    error: {
      type: String,
    },
    valid: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    secret: {
      type: Boolean,
      default: false,
    },
    mask: {
      type: String,
    },
    maskMin: {
      type: Number,
    },
    maskMax: {
      type: Number,
    },
    maskSeparator: {
      type: String,
    },
    ummask: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
    select: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    autocomplete: {
      type: Boolean,
      default: true,
    },
    disabledDate: {
      type: Function || Boolean,
      required: false,
    },
    editable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      maskOptions: maskOptions,
      typeSecret: 'password',
      viewPv: 'fa-eye',
    };
  },
  computed: {
    setError(value) {
      this.error = value;
    },
    classObject() {
      return {
        'field-disabled': this.disabled,
        'field-required': this.required,
        'field-error': this.error,
        'field-valid': this.valid,
      };
    },
    isDatePicker() {
      const isDatePickerWhenTypeIs = ['date', 'datetime'];

      const isUseToDatePicker = isDatePickerWhenTypeIs.findIndex(type => type === this.type);

      return isUseToDatePicker != -1;
    },
    isSelect() {
      const isSelectWhenTypeIs = ['select'];

      const isUseToSelect = isSelectWhenTypeIs.findIndex(type => type === this.type);

      return isUseToSelect != -1;
    },
    isTime() {
      const isTimeWhenTypeIs = ['time'];

      const isUseToTime = isTimeWhenTypeIs.findIndex(type => type === this.type);

      return isUseToTime != -1;
    },
    inputListeners() {
      return Object.assign({}, this.$listeners, {
        input: event => {
          if (!this.mask) {
            this.$emit('input', event.target.value);
          }
        },
        accept: event => {
          const value = this.ummask ? event.target.maskRef.unmaskedValue : event.target.value;
          this.$emit('input', value);
        },
      });
    },
  },
  mounted() {
    if (this.mask && !this.isDatePicker) {
      this.$refs.input.dispatchEvent(new Event('accept'));
    }

    if (this.select) {
      const inputRef = this.$refs.input;
      inputRef.select();
      inputRef.focus();
    }
  },
  methods: {
    mountedMask() {
      let mask = this.mask ? maskOptions[this.mask] : null;

      switch (this.mask) {
        case 'intervalNumber':
          if (this.maskMin) {
            mask.blocks.value.min = this.maskMin;
          }
          if (this.maskMax) {
            mask.blocks.value.max = this.maskMax;
          }
          if (this.maskSeparator) {
            mask.blocks.value.thousandsSeparator = this.maskSeparator;
          }
          break;
      }

      return mask;
    },
    eventIcon() {
      this.$emit('callbackIcon');
    },
    inputFocus() {
      let inputName = document.getElementsByName(this.name).item(0);
      inputName.disabled = false;
      inputName.focus();
    },
    pvView() {
      let inputPv = document.getElementsByName(this.name).item(0);
      this.typeSecret = inputPv.getAttribute('type') == 'text' ? 'password' : 'text';
      this.viewPv = this.typeSecret == 'text' ? 'fa-eye-slash' : 'fa-eye';
    },
  },
};
