<template>
  <th class="asset-sortable-field" scope="col" @click="$emit('click', field);">
    <div class="asset-sortable-field-wrapper">
      <slot></slot>
      <template v-if="selectedField === field">
        <sort-ascending-icon v-if="isAscending" />
        <sort-descending-icon v-else />
      </template>
    </div>
  </th>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { AssetSortField, AssetSortOrder } from '../types/api';

@Component
export default class AssetSortableField extends Vue {
  @Prop({ type: Number, required: true }) field!: AssetSortField;
  @Prop(Number) selectedField!: AssetSortField | null;
  @Prop(Number) sortOrder!: AssetSortOrder | null;

  get isAscending() {
    return this.sortOrder === AssetSortOrder.Ascending;
  }
}
</script>

<style lang="scss" scoped>
  .asset-sortable-field {
    &-wrapper {
      display: flex;
      align-items: center;

      .material-design-icon {
        margin-left: 0.5rem;
      }
    }

    &:hover {
      cursor: pointer;
    }
  }
</style>
