<template>
  <div class="filterSector">
    <ods-select
      v-model="mainSelect"
      placeholder="Selecciona filtro"
      size="small" class="mainSelect"
      @change="onChangeFilter($event)">
      <ods-option
        v-for="item in options"
        :key="item"
        :label="translate(item)"
        :value="item">
        <span class="capitalize">{{translate(item)}}</span>
      </ods-option>
    </ods-select>

    <ods-select v-if="secondFilter.isSelectFilter"
      v-model="selectFilter"
      placeholder="Selecciona filtro"
      size="small" @change="changeSecondFilter($event)">
      <ods-option
        v-for="item in selectOptions"
        :key="item"
        :label="item"
        :value="item">
      </ods-option>
    </ods-select>

    <ods-input v-if="secondFilter.isStringInput"
      size="deci"
      placeholder="Introduzca criterio"
      v-model="searchInput" isWhite
      @change="changeSecondFilter($event)">
    </ods-input>

    <ods-date-picker v-if="secondFilter.isDatePicker"
      size="deci"
      v-model="datePicker"
      type="date"
      placeholder="Selecciona día"
      @change="changeSecondFilter($event)">
    </ods-date-picker>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';
import {getTypes} from '@/utils/filters';

export default {
  name: 'dynamic-filter',
  props: ['data', 'options', 'type', 'valueType', 'dataType'],
  data() {
    return {
      value: '',
      filterType: null,
      result: [],
      mainSelect: '',
      selectOptions: null,
      selectFilter: null,
      searchInput: null,
      stringInput: null,
      datePicker: null,
      optionSelected: null,
      optionPreSelected: null,
      selectFields: ['type', 'status'],
      selectTypes: [],
      selectStatus: [],
      secondFilter: {
        isStringInput: false,
        isSelectFilter: false,
        isDatePicker: false,
      },
    };
  },
  watch: {
    type(value) {
      this.mainSelect = value;
      this.onChangeFilter(value);
    },
    valueType(value) {
      this.refillSecondInput(value);
    },
  },
  methods: {
    ...mapGetters([
      'getAssets',
    ]),
    ...mapActions([
      'fetchAssets',
      'updatedAssets',
    ]),
    getData(filterType, valueFilter) {
      if (this.dataType === 'assets') {
        if (!valueFilter && !this.searchInput) {
          this.fetchAssets();
        } else {
          this.fetchAssets({filterType, valueFilter});
        }
      } else if (valueFilter) {
        this.$emit('changeFilter', {filterType, valueFilter});
      }
    },
    // Campos con subtipos fijos - Sacar funcion
    refillSecondInput(option) {
      if (Array.isArray(option)) {
        this.selectOptions = option;
        this.selectFilter = this.optionPreSelected;
        this.changeSecondFilter(this.optionPreSelected);
      } else if (option) {
        this.optionPreSelected = option;
      } else {
        if (!option) {
          // selectFields array
          getTypes(this.data, 'type');
        }
        if (this.filterType === 'type') {
          this.refillSecondInput(this.selectTypes);
        } else {
          this.refillSecondInput(this.selectStatus);
        }
      }
    },
    onChangeFilter(typeMainfilter) {
      this.optionPreSelected = '';
      this.filterType = typeMainfilter;
      this.getData();
      this.searchInput = '';
      this.secondFilter.isSelectFilter = false;
      this.secondFilter.isDatePicker = false;
      this.secondFilter.isStringInput = false;
      if (typeMainfilter === 'type' || typeMainfilter === 'status') {
        this.refillSecondInput();
        this.secondFilter.isSelectFilter = true;
      } else if (typeMainfilter === 'creationDate') {
        this.secondFilter.isDatePicker = true;
      } else {
        this.secondFilter.isStringInput = true;
      }
    },
    changeSecondFilter(newValue) {
      if (newValue) {
        this.getData(this.filterType, newValue);
      } else {
        this.getData();
      }
    },
    translate(column) {
      return this.$t(`dataTables.${column}`);
    },
  },
};
</script>

<style lang="scss" scoped>
  .ods-select {
    width: 170px;
    input {
      border-radius: 10px;
      background-color: #FFF! important;
    }
  }

  .mainSelect{
    margin-right: 2%;
  }
</style>
