<template>
  <div :class="{ 'label-visible': TfTable.$slots.filterLabel || TfTable.showFilterLabel }">
    <h3 v-if="TfTable.$slots.filterLabel || TfTable.showFilterLabel">
      <slot name="filterLabel">
        {{ $slots.filterLabel || 'Filters:' }}
      </slot>
    </h3>
    <div class="filter-container">
      <div
        v-for="filter in TfTable.filters"
        :key="filter.prop"
        :style="{ width: `${filter.width}` }"
        class="filter-column"
      >
        <TfFilter
          v-bind="{
            disabled: disableFilters,
            filter,
            value: TfTable.localFilterValues[filter.prop]
          }"
          @changeDateFilterType="TfTable.onChangeDateFilterType(filter.prop, $event)"
          @input="TfTable.onChangeFilterValue({
            prop: filter.prop,
            value: $event
          })"
        >
          <template #noValue>
            <slot name="emptyCell">
              &mdash;
            </slot>
          </template>
        </TfFilter>
      </div>
      <TfButton
        :disabled="disableFilters || !hasFilterValues"
        data-test="reset filters"
        size="text"
        type="primary"
        @click="TfTable.onResetFilters"
        v-text="'Reset All'"
      />
    </div>
  </div>
</template>
<script>
  /**
   * TfTableFilters is a component that is used as a child of the TfTable component and controls the filters using the TfFilter component.
   *
   * @vuedoc
   * @exports TfTable/Filters
   * @category Components
   */
  export default {
    name: 'TfTableFilters',
    inject: ['TfTable'],
    computed: {
      /**
       * Evaluate the TfTable table data and sorting to return boolean for the template.
       *
       * @returns {boolean}
       */
      disableFilters() {
        return !this.TfTable.tableData.length || this.TfTable.isSorting;
      },
      /**
       * Evaulate the TfTable localFilterValues values to see if there are any values.
       *
       * @returns {boolean}
       */
      hasFilterValues() {
        return Object.values(this.TfTable.localFilterValues).some((value) => value.length);
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  h3 {
    padding-top: 20px;
  }

  .filter {
    &-container {
      display: flex;
      align-items: baseline;
      margin: 20px 0 35px;

      .label-visible & {
        margin-top: 0;
      }
    }

    &-column {
      margin-right: 13px;
    }
  }
</style>
