<template>
  <div class="row full-width q-gutter-x-xs q-pb-xs recruits-sort-bar">
    <q-btn
      v-for="sortItem of sortButtons" :key="sortItem.value"
      class="sort-btn"
      :class="getSortButtonClasses(sortItem.value)"
      @click="sortHandler(sortItem.value)"
      :label="sortItem.label"
      icon-right="pgs-arrow-down"
      :disabled="loading"
    />
  </div>        
</template>

<style lang="scss" scoped>

.recruits-sort-bar {
  border-bottom: 1px solid rgba(1, 72, 116, 0.11);

  .sort-btn {
    font-family: 'Golos UI';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-transform: initial;
    color: rgba(2, 12, 18, 0.58);

    padding: 0px 4px 0px 4px;
    white-space: nowrap;

    ::v-deep .q-btn__wrapper {
      padding: 0;
      min-height: 2em;
    }

    ::v-deep i.on-right {
      display: none;
      margin-left: initial;
    }

    &.current-sort {
      color: #107ABC;
      ::v-deep i {
        transform: rotate(0deg);
        display: initial;
        transition: .1s;
      }
      &.descending ::v-deep i {
        transform: rotate(-180deg);
        transition: .1s;
      }
    }
  }    
}

</style>

<script lang="ts">
import { Component, Emit, ModelSync, Prop, Vue } from 'vue-property-decorator';

import { Option } from '@/recruits/models';
import { QPagination } from '@/models/models-ui';

@Component({})
export default class SortBar extends Vue {

  @Prop({
    type: Boolean,
    default: false, 
  })
  public readonly loading: boolean;

  @Prop()
  public readonly pagination: QPagination;

  @ModelSync('data', 'change', { type: Array, default: [] })
  public readonly sortButtons: Array<Option>;

  public getSortButtonClasses(target: string) {
    return {
      'current-sort': this.pagination?.sortBy === target,
      'descending': this.pagination?.descending,
    };
  }

  @Emit('click')
  public sortHandler(val: string) {
    let sortBy = this.pagination?.sortBy;
    let descending = this.pagination?.descending;

    if (this.pagination) {
      if (this.pagination.sortBy !== val) {
        sortBy = val;
        descending = false;
      } else {
        if (!this.pagination.descending) {
          descending = true;
        } else {
          descending = true;
          sortBy = '';
        }
      }
    }

    return {
      sortBy,
      descending
    };
  }

}

</script>