import { Component, EventEmitter, HostBinding, HostListener, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'th[cg-sort-header],td[cg-sort-header]',
  template: `
    <span class="sort-header">
      <span class="title">
        <ng-content></ng-content>
      </span>
      <span *ngIf="enabled" class="sorter">
        <i class="fas fa-sort-up up " [ngClass]="{active : order == 'asc'}"></i>
        <i class="fas fa-sort-down down" [ngClass]="{active : order == 'desc'}" ></i>
      </span>
    </span>
  `,
  styles: [
    `
  .sort-header{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  .title{
    flex:1
  }
  .sorter{
    display:inline-flex;
    flex-direction:column;
    align-items: center;
  }
  .sorter>i{
    font-size:14px !important;
    color:#ccc;
  }

  .sorter .active{
    color:#1890ff;
  }
  .up{
    margin-bottom : -0.45em;
  }

  .down{
    margin-top:-0.45em;
  }
  `
  ]
})
export class SortHeaderComponent implements OnInit {
  @HostListener('click')
  onClick() {
    if(!this.enabled) return;
    if (this.order == null) {
      this.onSortChange.emit('desc')
    } else if (this.order == 'desc') {
      this.onSortChange.emit('asc')
    } else if (this.order == 'asc') {
      this.onSortChange.emit(null);
    }
  }


  @HostBinding('style.cursor') get cursor() { return this.enabled ? 'pointer' : '' }

  @Input() enabled = true;
  @Input() order: SortType = null;

  @Output() onSortChange = new EventEmitter<SortType>()

  constructor() { }

  ngOnInit(): void {

  }

}


export type SortType = 'asc' | 'desc' | null;
