import { Directive, EventEmitter, Input, Output } from '@angular/core'

export interface SortEvent {
  column: string
  reverse: boolean
}

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'currentSortField == sortable && !currentSortReverse',
    '[class.des]': 'currentSortField == sortable && currentSortReverse',
    '(click)': 'rotate()',
  },
})
export class SortableDirective {
  constructor() {}

  @Input()
  sortable: string = ''

  @Input()
  currentSortReverse: boolean = false

  @Input()
  currentSortField: string

  @Output() sort = new EventEmitter<SortEvent>()

  rotate() {
    if (this.currentSortField != this.sortable) {
      this.sort.emit({ column: this.sortable, reverse: false })
    } else if (
      this.currentSortField == this.sortable &&
      !this.currentSortReverse
    ) {
      this.sort.emit({ column: this.currentSortField, reverse: true })
    } else {
      this.sort.emit({ column: null, reverse: false })
    }
  }
}