<template>
  <div :class="['table-header row no-gutters bg-light', { sortable }]">
    <a
      v-for="column in columns"
      @click.prevent="sortBy(column.id)"
      :key="column.id"
      :class="[
        'd-flex py-1 align-items-center justify-content-center small ' +
          column.class || '',
        { active: sortColumn === column.id }
      ]"
      :style="`width: ${column.width};`"
    >
      <span
        :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')"
        v-if="sortable"
      >
        <font-awesome-icon :icon="sortIcon(column.id)" fixed-width />
      </span>
      <font-awesome-icon v-if="column.icon" :icon="column.icon" fixed-width />
      <span v-if="column.title">
        {{ $gettext(column.title) }}
      </span>
    </a>
    <div v-if="extraColumnForButtons" class="col"></div>
  </div>
</template>

<style lang="sass">
.table-header
  > a
    border-right: solid 1px #e7e8e9
    background-color: #f8f9fa
    a
      outline: none
      &:hover
        text-decoration: none
        background-color: #f8f9fa
  &.sortable
    a
      cursor: pointer
      &:hover,
      &.active
        background: #e7e8e9
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
export default {
  props: {
    columns: { type: Array },
    sortable: { type: Boolean, default: true },
    extraColumnForButtons: { type: Boolean, default: true }
  },
  data() {
    return {
      sortColumn: null,
      sortDirection: "ASC"
    };
  },
  methods: {
    sortIcon(id) {
      if (this.sortColumn === id) {
        return "sort-" + (this.sortDirection === "ASC" ? "down" : "up");
      }
      return "sort";
    },
    sortBy(id) {
      if (this.sortable) {
        this.sortColumn = id;
        this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC";
        this.$emit("sortingChanged", {
          sortColumn: this.sortColumn,
          sortDirection: this.sortDirection
        });
      }
    }
  }
};
</script>