export default {
  name: 'BaseSelectSearch',
  inheritAttrs: false,
  data(){
    return {
      filters: this.value > '-1' ? this.option.filter((item) => item.id === this.value)[0]['name'] : this.initialValue,
      editCategory: '',
      showOption: true,
      valtop : 'position: relative',
      listOption : [],
      valueSelected: this.value > '-1' ? this.option.filter((item) => item.id === this.value)[0]: [],
      position : -1,
      passQuebraLinha: 0,
    }
  },
  components: {
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
  },
  props: {
    label: {
      type: String,
    },
    description: {
      type: String,
    },
    error: {
      type: String,
    },
    valid: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    required: {
      type: Boolean,
      default: false,
    },
    option: {
      type: Array,
      default: false,
    },
    name: {
      type: String
    },
    value: {
      default: -1,
    },
    initialValue: {
      default: 'Todos',
    }
  },
  computed: {
    classObject() {
      return {
        'field-disabled': this.disabled,
        'field-required': this.required,
        'field-error': this.error,
        'field-valid': this.valid,
        'field-small': this.size === 'small',
        'field-medium': this.size === 'medium',
        'field-large': this.size === 'large',
      };
    },
  },
  mounted() {
    if(this.valueSelected)
      this.$emit('input', this.valueSelected.id);

  },
  methods: {
    onChange(event) {
      const selectedValue = this.valueSelected.id;
      this.$emit('input', selectedValue);
      this.$emit('change', selectedValue);
    },
    onFocusout(event) {
      const selectedValue = this.valueSelected.id;
      this.$emit('focusout', selectedValue);
    },

    selectOption(event){

      this.editCategory = event.target.dataset.idCategory;

      if(this.editCategory != -1){
        let InfoSelect = (this.option.filter((item) => item.id === this.editCategory));
        this.filters = InfoSelect[0]['name'];
        this.valueSelected = InfoSelect[0];
      }else{
        this.filters = 'Todos';
        this.valueSelected = {
          'id': -1,
          'name':   'Todos'
        }
      }
      this.showOption = false;
      this.$emit('callback', this.valueSelected.id,this.name);
    },
    showOpt(){
      this.listOption = this.option;
      this.showOption = true;
      let SeletorTela = document.getElementById('dropdown-select').getBoundingClientRect().y;
      let SeletorTelaheight = document.getElementById('dropdown-select').getBoundingClientRect().height;
      var altura = window.screen.height * 0.8;

      (SeletorTela + SeletorTelaheight > altura) ? this.valtop = 'position: absolute;  bottom: 49px;' : this.valtop = 'position: relative;';

      let input = document.getElementsByName(this.name).item(0);
      input.select();

    },
    filterKeyPress(e){
      e.preventDefault();
      let thisName = document.getElementsByName(this.name+'Prev').item(0);

      let posLi = thisName.getElementsByClassName('ul').item(0);
      let scrollOpt =  thisName.getElementsByClassName('dropdown-select');

      if(e.code != "Tab" && e.code != "ArrowLeft" && e.code != "ArrowRight"){
        //Controles de seleção
        if(e.code == "ArrowUp" && this.position > -1){

          if(this.position > 0){
            this.position--;
            if(posLi) {
              posLi.childNodes[this.position + 1].classList.remove('selected');
              posLi.childNodes[this.position].classList.add('selected');
            }
          }
          if(posLi) {
            let passo = posLi.childNodes[this.position ].getBoundingClientRect().height;
            this.passQuebraLinha -= (this.passQuebraLinha - passo) < 0 ? 0 : passo;
            scrollOpt.item(0).scrollTo(0, (this.passQuebraLinha));
          }

          this.valueSelected = this.listOption[this.position];
          this.filters = this.valueSelected['name'];

        }else if(e.code == "ArrowDown"){

          if(this.listOption.length-1  > this.position   ) {
            this.position++;
            if(posLi){
              if(this.position > 0)
                posLi.childNodes[this.position - 1].classList.remove('selected');
              posLi.childNodes[this.position].classList.add('selected');
            }
          }

          if(posLi) {
            let passo = 0;

            if(this.position > 0)
              passo = posLi.childNodes[this.position - 1].getBoundingClientRect().height;

            if((this.passQuebraLinha + passo) < posLi.getBoundingClientRect().height){
              this.passQuebraLinha += passo ;
            }else{
              this.passQuebraLinha = posLi.getBoundingClientRect().height - passo ;
            }

            scrollOpt.item(0).scrollTo(0, (this.passQuebraLinha));
          }
          this.valueSelected = this.listOption[this.position];
          this.filters = this.valueSelected['name'];

        }
        else if(e.code == "Enter"){
          this.showOption = false;

          if(this.listOption.length == 1){
            this.valueSelected = this.listOption[0];
            this.filters = this.valueSelected['name'];
          }
          if( this.valueSelected.id){
            this.$emit('callback', this.valueSelected.id,this.name);
          }

        }
        else if(e.code == "Escape"){
          this.showOption = false;
        }else {
          this.passQuebraLinha = 0;
          this.position = -1;
          let SeletorTela = document.getElementById('dropdown-select').getBoundingClientRect().y;
          let SeletorTelaheight = document.getElementById('dropdown-select').getBoundingClientRect().height;
          var altura = window.screen.height * 0.8;

          this.listOption = this.option.filter((item) => item.name.toLowerCase().normalize("NFD").replace(/([\u0300-\u036f]|[^0-9a-zA-Z])/g, '').includes(this.filters.toLowerCase().trim().normalize("NFD").replace(/([\u0300-\u036f]|[^0-9a-zA-Z])/g, '')));

          (SeletorTela + SeletorTelaheight > altura) ? this.valtop = 'position: absolute;  bottom: 49px;' : this.valtop = 'position: relative;';

        }
      }
    },
    preventDefault(event){
      if(event.code == "Enter")
        event.preventDefault();
    },
    focusInput(){
      let inputName = document.getElementsByName(this.name).item(0);
      inputName.focus();
    }
  },
};
