<template>
  <section
    v-bind:class="[
      componentClass,
      {'c-is-exp': isExpandedInternal}
    ]"
    ref="filterPanel"
    :style="{
      '--c-filter-panel-is-exp-height': filterPanelExpandedHeight
    }"
  >
    <div class="c-cont-main" :data-header="header">
      <c-edit
        v-if="getDataSetWhereFieldsIdentsDataField(dataSet, 'searchText') != null"
        class="c-search"
        :appWindowIdent="appWindowIdent"
        :dataSetIdent="dataSetIdent"
        dataFieldIdent="searchText"
        sourceKind="where"
        :showRefresh="true"
        oncfTrigger="enter"
        :autofocus="true"
      />
      <div v-if="$scopedSlots['content-add'] != null" class="c-cont-add">
        <slot name="content-add" v-bind:row="row" v-bind:where="where" ></slot>
      </div>
      <c-btnref
        v-if="showRefreshButton"
        :appWindowIdent="appWindowIdent"
        :dataSetIdent="dataSetIdent"
        sourceKind="where"
        label="Szukaj"
      ></c-btnref>
    </div>
    <div v-if="$scopedSlots['content'] != null" class="c-cont">
      <slot name="content" v-bind:row="row" v-bind:where="where" ></slot>
    </div>
    <button
      :class="[
        this.isExpandedInternal == true ? 'c-btn-filters-collapse' : 'c-btn-filters-expand'
      ]"
      v-on:click="onClickExpandCollapse"
    ></button>

  </section>
</template>


<script>
import base from "./c-base"
import cEdit from "./c-edit"
import cBtnref from "./c-btnref"

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-filter-panel',
      isExpandedInternal: this.isExpanded,
      filterPanel: null,
      filterPanelExpandedHeight: null
    };
  },
  components: {
    "c-edit": cEdit,
    "c-btnref": cBtnref,
  },
  props: {
    header: {
      type: String,
      default: 'Zawężanie wyników'
    },
    showRefreshButton: {
      type: Boolean,
      default: true
    },
    isExpanded: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // ...mapActions("csAppWindowsUtils", ["deleteAllSelectedRow"]),
    onClickExpandCollapse: function() {
      this.isExpandedInternal = !this.isExpandedInternal
    },
    trySetFilterPanelExpandedHeight: function() {
      if(this.filterPanel != null) {
        this.filterPanelExpandedHeight = 
          Math.ceil(
              this.filterPanel.scrollHeight
              + parseFloat(getComputedStyle(this.filterPanel).borderTopWidth)
              + parseFloat(getComputedStyle(this.filterPanel).borderBottomWidth)
          ) + 'px'
      }
    }
  },
  mounted: function() {
    this.filterPanel = this.$refs.filterPanel
    this.trySetFilterPanelExpandedHeight()
  },
  updated: function(){
    this.trySetFilterPanelExpandedHeight()
  }
};
</script>