import { Component, OnInit, Input } from '@angular/core';
import { Sort } from '@angular/material/sort';
import { I18nService } from '../../services/i18n.service';

@Component({
  selector: 'app-services-grid',
  templateUrl: './servicesgrid.component.html',
  styleUrls: [ './servicesgrid.component.scss' ]
})
export class ServicesGridComponent implements OnInit {

  @Input() services;

  constructor(private i18n: I18nService) { }

  ngOnInit(): void {
    this.sortData({ "active": "name", "direction": "asc" });
  }

  sortData(sort: Sort) {
    const data = this.services.slice();
    if (!sort.active || sort.direction === '') {
      this.services = data;
      return;
    }

    this.services = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'name': return this.compare(this.i18n.get('services.' + a.name + '.title', []), this.i18n.get('services.' + b.name + '.title', []), isAsc);
        default: return 0;
      }
    });
  }
  
  compare(a: number | string , b: number | string , isAsc: boolean) {
    if (typeof a === 'string' && typeof b === 'string') {
      return  a.localeCompare(b,undefined, { sensitivity: 'accent' } ) * (isAsc ? 1 : -1);
    }
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  }
}