import { Component, OnInit } from "@angular/core";

import { GroupResult, groupBy } from "@progress/kendo-data-query";

@Component({
  selector: "my-app",
  template: `
    <div class="example-wrapper">
      <kendo-autocomplete [data]="groupedData" [valueField]="'name'">
      </kendo-autocomplete>
    </div>
  `
})
export class AppComponent implements OnInit {
  public data: Array<any> = [
    { name: "Pork", category: "Food", subcategory: "Meat", count: 20 },
    { name: "Pepper", category: "Food", subcategory: "Vegetables", count: 50 },
    { name: "Beef", category: "Food", subcategory: "Meat", count: 67 }
  ];

  public groupedData: GroupResult[] = groupBy(this.data, [
    { field: "subcategory" }
  ]);

  public ngOnInit(): void {
    this.test();
  }

  private test() {
    this.groupedData.forEach(s => {
      let sum = 0;
      s.items.forEach(x => {
        const t = x as Example;
        sum += t.count;
      });
      s.value += " - " + sum;
    });
  }
}
export class Example {
  public name: string;

  public category: string;

  public count: number;

  public subcategory: string;
}
