<template>
  <div>
    <v-row class="mt-12" justify="center" v-if="inProgress">
    
      <v-col
        v-for="(i, index) in 4"
        v-bind:key="index"
        lg="12"
        md="12"
        sm="12"
        cols="12"
        class="pr-lg-3 cursor-pointer"
      >
        <v-skeleton-loader type="list-item-two-line"></v-skeleton-loader>
      </v-col>
    </v-row>
    <v-expansion-panels
      v-model="filterPanel"
      multiple
      flat
      accordion
      v-else-if="filterList"
    >
      <v-expansion-panel
        tile
        class="transparent-background first-v-expansion-panel filter-expansion-panel"
        v-for="(attribute, index) in filterList"
        :key="index"
      >
        <v-expansion-panel-header
          class="fontsize-14 body ls-n09 color-1d text-uppercase px-3 py-0 my-n1 expansion-text-black"
          :class="attribute.label == checkName(attribute.label ) ?'primary--text filter-panel-icon':'expansion-text-black'"
          v-if="attribute.counts.length"
          >{{ attribute.label  }}
          <template v-slot:actions>
            <v-icon class="expansion-text-black">$expand</v-icon>
          </template>
        </v-expansion-panel-header>
        <v-expansion-panel-content class="pt-2">
          <ul
            v-for="(option, index) in attribute.counts"
            :key="index"
            class="pl-0 filter-expansion-panel-list"
          >
            <li 
              class="cursor-pointer filter-panel-subheading pb-1"
              :class="option.value == checkValue(option.value) ?'primary--text':'expansion-text-black'"
              v-if="option.value"
               @click="createFilter(
                 attribute.label,
                  attribute.prop,
                  option.value)"
            > {{ option.value}}({{option.count}})
            </li>
          </ul>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>
<script>
/* eslint-disable no-alert, no-console ,  no-debugger */
export default {
  name: "FilterComponent",
  data: () => ({
      filterPanel: []
  }),
  props:["filterList","inProgress"],
  computed: {
    enabledFilters(){
      return this.$store.state.catalogBrowser.enabledFilters;
    },
     categoryId() {
      return this.$route.meta.id;
    },
  },
  watch: {
    enabledFilters(){
      this.showSelectedPanel();
    }
  },
  methods: {
    async createFilter(label, prop,value) {
      this.$emit("applyNewFilter",{label:label, prop:prop,value:value});
    },
    checkName(attribute) {
      let data = this.enabledFilters.filter(obj => obj.label === attribute);
      return data.length?data[0].label:"";
    },
    checkValue(attributeValue) {
      let data = this.enabledFilters.filter(obj => obj.value === attributeValue);
      return data.length?data[0].value:"";
    },
    showSelectedPanel() {
      this.filterPanel = [];
      if (this.enabledFilters.length > 0) {
        for (let i = 0; i < this.enabledFilters.length; i++) {
          this.filterList.filter(
           (x,index) => {
             if(x.label === this.enabledFilters[i].label)
              this.filterPanel.push(index);
           }
          );
        }
      }
    },
  },
  created(){
    this.showSelectedPanel();
  } 
};
</script>

<style src="./FilterComponent.scss" lang="scss" scoped/>