<template>
  <thead v-if="TfTable.tableData.length">
    <tr>
      <template v-for="column in TfTable.tableMeta.columns">
        <th
          v-if="!column.hidden"
          :key="column.label"
          :width="column.width || 'auto'"
        >
          <TfButton
            v-if="column.sortable"
            :class="{ 'is-active': TfTable.sortColumn === column.prop }"
            :direction="TfTable.sortDirection"
            :selected="TfTable.sortColumn === column.prop"
            :data-test="`sort ${column.prop}`"
            type="table-sort"
            @click="TfTable.changeSortCriteria(column)"
          >
            {{ column.label }}
          </TfButton>
          <span
            v-else
            :data-test="`header ${column && column.label ? column.label : 'label'}`"
            v-text="column.label"
          />
        </th>
      </template>
      <th
        v-if="TfTable.hasChildren"
        class="child-toggle"
        width="51"
      />
    </tr>
  </thead>
</template>

<script>
  /**
   * TfTableHead is a component that is used within the TfTable component and controls the th columns and its sorting logic.
   *
   * @vuedoc
   * @exports TfTable/Head
   * @category Components
   */
  export default {
    name: 'TfTableHead',
    inject: ['TfTable'],
  };
</script>

<style lang="scss" scoped>
  th {
    &.child-toggle {
      padding: 0;
    }

    .tf-button {
      font-weight: 700;
    }
  }
</style>
