<template>
  <div>
    <div v-if="!rows.length" data-test="table-no-results" class="scroller">
      <div class="table-view-item">
        <div class="table-row-template">
          <div accept-group="items" class="table-view-body-space"></div>
          <div class="shadow-area"></div>
          <div class="indicator sticky"></div>
          <div class="table-item-inner">
            <div class="table-view-item-value w-100 align-items-center p-3 no-results">
              {{$t('components.table.noResults')}}
            </div>
            <div class="boundary right"></div>
          </div>
        </div>
      </div>
    </div>
    <itf-table-rows
      v-else
      class="scroller"
      :rows="rows"
      :selected-ids="selectedIds"
      :columns="columns"
      :id-property="idProperty"
      :subrows-property="subrowsProperty"
      :divider-property="dividerProperty"
      :show-add-column="showAddColumn"
      :show-actions="showActions"
      :no-select-all="noSelectAll"
      :editable="editable"
      :currency="currency"
      :currencies="currencies"
      :indicatorType="indicatorType"
      :expanded-ids="expandedIds"
      :striped="striped"
      :expanded-all="expandedAll"
      :css-property="cssProperty"
      :editable-property="editableProperty"
      :active="active"
      @update:expanded-ids="$emit('update:expanded-ids', $event)"
      @row-click="$emit('row-click', $event)"
      @update="$emit('update', $event)"
      @toggle="onToggle"
    >
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData || {}"/>
      </template>
      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
        <slot :name="name" v-bind="slotData || {}"/>
      </template>
    </itf-table-rows>
  </div>
</template>
<style lang="scss">
.no-results {
  text-align: center;
  margin-left: -22px;
  justify-content: center;
}
.table-row-template {
  display: flex;
  height: 100%;
  align-items: stretch;
}
.table-item-inner {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: row;
}

.scroller > .table-view-item:last-child {
  .table-item-inner, .indicator {
    border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
  }
}

.table-item-inner .extra {
  flex-grow: 1;
  border-color: var(--bs-border-color);
}

.indicator {
  //height: 100%;
  left: var(--shadow-area-width);
  width: var(--indicator-area-width);
  z-index: 4;
  position: -webkit-sticky;
  position: sticky;
  background-color: var(--itf-table2-row-bg);
  //border-right: 1px solid var(--bs-border-color);
  //border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem; // важливо для скруглення //var(--itf-table-min-width);
}

.table-row-template, .table-view-header-value {
  .form-check {
    font-size: 16px;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;

    .form-check-input {
      --bs-form-check-bg: #fff;
      margin: 0;
      border: 1px solid #0000001A;
    }
  }
}

.table-small-row .table-view-item {
  // height: var(--table-row-height);
}
.resize-observer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  pointer-events: none;
  display: block;
  overflow: hidden;
  opacity: 0;
}
</style>
<script>
import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
import itfTableRows from './TableRows.vue';

export default @Component({
  name: 'itfTableBody',
  components: {
    itfTableRows
  }
})
class itfTableBody extends Vue {
  @Prop() columns;
  @Prop() rows;
  @Prop() idProperty;
  @Prop() subrowsProperty;
  @Prop() dividerProperty;
  @Prop() active;
  @Prop(Boolean) showAddColumn;
  @Prop(Boolean) showActions;
  @Prop(Boolean) noSelectAll;
  @Prop(Boolean) editable;
  @Prop(Boolean) expandedAll;
  @Prop(Boolean) striped;
  @Prop() editableProperty;
  @Prop() selectedIds;
  @Prop() currency;
  @Prop() currencies;
  @Prop() cssProperty;
  @Prop({ type: String, default: null }) indicatorType;
  @Prop() expandedIds;

  onToggle(item) {
    this.$emit('update:expanded-ids', this.expandedIds.includes(item[this.idProperty])
      ? this.expandedIds.filter((id) => id !== item[this.idProperty])
      : [...this.expandedIds, item[this.idProperty]]);
  }
}
</script>
