<commit_before><template>

  <th scope="col">
    <router-link v-if="sortable" :to="vLink" class="header-text">
      <span>{{ text }}</span>
      <span class="icon-wrapper" v-if="sortable">
        <mat-svg class="icon" :class="{ sorted: isDescending }" category="hardware" name="keyboard_arrow_down"/>
        <mat-svg class="icon" :class="{ sorted: isAscending }" category="hardware" name="keyboard_arrow_up"/>
      </span>
      <span class="visuallyhidden" v-if="isAscending">{{ $tr('ascending') }}</span>
      <span class="visuallyhidden" v-if="isDescending">{{ $tr('descending') }}</span>
    </router-link>
    <div v-else class="header-text">{{ text }}</div>
  </th>

</template>


<script>

  const ReportConstants = require('../../reportConstants');
  const coachGetters = require('../../state/getters/main');
  const values = require('lodash/values');

  module.exports = {
    $trNameSpace: 'headerCell',
    $trs: {
      ascending: '(sorted ascending)',
      descending: '(sorted descending)',
    },
    props: {
      text: {
        type: String,
        required: true,
      },
      column: {
        type: String,
        required: true,
        validator(value) {
          return values(ReportConstants.TableColumns).includes(value);
        },
      },
    },
    computed: {
      sortable() {
        return false; // TODO - disable sorting until it's fully implemented
        // return !this.isRecentPage;
      },
      sorted() {
        return this.sortable && this.pageState.sortColumn === this.column;
      },
      isDescending() {
        return this.sorted && this.pageState.sortOrder === ReportConstants.SortOrders.DESCENDING;
      },
      isAscending() {
        return this.sorted && this.pageState.sortOrder === ReportConstants.SortOrders.ASCENDING;
      },
      nextSortState() {
        if (!this.sorted || this.pageState.sortOrder === ReportConstants.SortOrders.NONE) {
          return ReportConstants.SortOrders.DESCENDING;
        }
        if (this.pageState.sortOrder === ReportConstants.SortOrders.DESCENDING) {
          return ReportConstants.SortOrders.ASCENDING;
        }
        return ReportConstants.SortOrders.NONE;
      },
      vLink() {
        // todo
        return {
          name: '',
          params: {},
          replace: true, // replace state
        };
      },
    },
    vuex: {
      getters: {
        pageName: state => state.pageName,
        pageState: state => state.pageState,
        isRecentPage: coachGetters.isRecentPage,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~kolibri.styles.definitions'

  $size = 15px

  th
    white-space: nowrap
    vertical-align: middle
    border-bottom: 1px solid $core-text-annotation
    font-weight: normal

  .header-text
    text-decoration: none
    display: block
    color: $core-text-annotation

  .icon-wrapper
    display: inline-block
    position: relative
    height: $size
    width: $size

  .icon
    height: $size
    width: $size
    position: absolute
    left: 0
    top: 4px
    transition: opacity $core-time ease
    opacity: 0

  .sorted
    opacity: 100

</style><commit_msg>make header a pure component that emits click events<commit_after><template>

  <th scope="col">
    <button v-if="sortable" class="header-text" @click="$emit('click')">
      <span>{{ text }}</span>
      <span class="icon-wrapper" v-if="sortable">
        <mat-svg
          class="icon"
          :class="{ sorted: sortedDescending }"
          category="hardware"
          name="keyboard_arrow_down"
        />
        <mat-svg
          class="icon"
          :class="{ sorted: !sortedDescending }"
          category="hardware"
          name="keyboard_arrow_up"
        />
      </span>
      <span class="visuallyhidden" v-if="!sortedDescending">{{ $tr('ascending') }}</span>
      <span class="visuallyhidden" v-if="sortedDescending">{{ $tr('descending') }}</span>
    </button>
    <div v-else class="header-text">{{ text }}</div>
  </th>

</template>


<script>

  module.exports = {
    $trNameSpace: 'headerCell',
    $trs: {
      ascending: '(sorted ascending)',
      descending: '(sorted descending)',
    },
    props: {
      text: {
        type: String,
        required: true,
      },
      sortable: {
        type: Boolean,
        default: false,
      },
      sorted: {
        type: Boolean,
      },
      sortedDescending: {
        type: Boolean,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~kolibri.styles.definitions'

  $size = 15px

  th
    white-space: nowrap
    vertical-align: middle
    border-bottom: 1px solid $core-text-annotation
    font-weight: normal

  .header-text
    border: none
    display: block
    color: $core-text-annotation

  .icon-wrapper
    display: inline-block
    position: relative
    height: $size
    width: $size

  .icon
    height: $size
    width: $size
    position: absolute
    left: 0
    top: 4px
    transition: opacity $core-time ease
    opacity: 0

  .sorted
    opacity: 100

</style>
{'fraction_non_alphanumeric': 0.1456770627714173, 'fraction_numerical': 0.0035530990919857876, 'mean_word_length': 2.320445609436435, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4739296', 'n_tokens_mistral': 1625, 'n_tokens_neox': 1568, 'n_words': 334}