<template>
  <svg class="n-th-sort" width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="11.4 7.2 4.6 7.2 8 3" class="n-th-sort-arrow" :class="getClasses(sortBy, 'asc')"></polygon>
    <polygon points="11.4 8.8 4.6 8.8 8 13" class="n-th-sort-arrow" :class="getClasses(sortBy, 'desc')"></polygon>
  </svg>
</template>

<script>
import { inArray } from '@uif/next/lib/utils/tools'

export default {
  name: 'n-table-th-sort',
  props: {
    sortBy: {
      validator (value) {
        return !value || inArray(['asc', 'desc'], value)
      },
      default: null
    }
  },
  methods: {
    getClasses (value, sortBy) {
      return value && value === sortBy ? 'active' : null
    }
  }
}
</script>
