import { IMaskDirective } from 'vue-imask';

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

import maskOptions from '@assets/js/masks';
import {number} from "@assets/js/filters";

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
    },
  },
  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', 'month', 'year', 'datetime', 'time', 'week'];

      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;

    },
    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';
    },

  }
};
