import {
  Component,
  ChangeDetectionStrategy,
  effect,
  input,
} from "@angular/core";
import { getGroupingInformationString, ReportRow } from "../../report-row";
import { FlatTreeControl } from "@angular/cdk/tree";
import {
  MatTreeFlatDataSource,
  MatTreeFlattener,
} from "@angular/material/tree";
import { MatTableModule } from "@angular/material/table";
import { MatButtonModule } from "@angular/material/button";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";

interface FlattenedReportRow extends ReportRow {
  level: number;
  isExpandable: boolean;
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "app-report-row",
  templateUrl: "./report-row.component.html",
  styleUrls: ["./report-row.component.scss"],
  imports: [MatTableModule, MatButtonModule, FontAwesomeModule],
})
export class ReportRowComponent {
  rows = input<ReportRow[]>([]);

  displayedColumns: string[] = ["name", "count"];

  getGroupedByString = getGroupingInformationString;
  treeFlattener = new MatTreeFlattener<ReportRow, FlattenedReportRow>(
    (row, level) => ({
      level: level,
      isExpandable: !!row.subRows && row.subRows.length > 0,
      ...row,
    }),
    (row) => row.level,
    (row) => row.isExpandable,
    (row) => row.subRows,
  );
  treeControl = new FlatTreeControl<FlattenedReportRow>(
    (row) => row.level,
    (row) => row.isExpandable,
  );
  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor() {
    effect(() => {
      this.dataSource.data = this.rows();
    });
  }
}