import { Component } from '@angular/core';
import {Bean} from '../../models/Bean';
import {SystemService} from '../../services/system.service';
import {
  MatCard,
  MatCardContent,
  MatCardHeader,
  MatCardSubtitle,
  MatCardTitle,
  MatCardTitleGroup
} from '@angular/material/card';
import {MatDivider} from '@angular/material/divider';
import {
  MatCell,
  MatCellDef,
  MatColumnDef,
  MatHeaderCell,
  MatHeaderCellDef, MatHeaderRow,
  MatHeaderRowDef, MatRow, MatRowDef,
  MatTable
} from '@angular/material/table';
import {MatIconButton} from '@angular/material/button';
import {MatIcon} from '@angular/material/icon';
import {MatList, MatListItem} from '@angular/material/list';
import {MatTab, MatTabGroup} from '@angular/material/tabs';

@Component({
  selector: 'app-system.component',
  imports: [
    MatCard,
    MatCardSubtitle,
    MatCardContent,
    MatCardHeader,
    MatCardTitle,
    MatDivider,
    MatTable,
    MatColumnDef,
    MatHeaderCell,
    MatCell,
    MatIconButton,
    MatIcon,
    MatHeaderCellDef,
    MatCellDef,
    MatHeaderRowDef,
    MatRowDef,
    MatRow,
    MatHeaderRow,
    MatList,
    MatListItem,
    MatTabGroup,
    MatTab
  ],
  templateUrl: './system.component.html',
  styleUrl: './system.component.scss'
})
export class SystemComponent {

  // @ViewChild(MatPaginator) paginator: MatPaginator;
  // @ViewChild(MatSort) sort: MatSort;

  customBeans:Bean[] = [] ;
  allBeans:Bean[] = [] ;
  displayedColumns: string[] = ['shortName', 'typeShortName', 'scope'];

  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];

  expandedElement: Bean | null = null;

  resultsLength = 0;
  isLoadingResults = true;
  isRateLimitReached = false;

  constructor(private systemService: SystemService) { }

  ngOnInit(): void {
    this.retrieveBeans();
  }

  retrieveBeans(): void {
    this.systemService.getCustomBeans()
      .subscribe(
          (data: Bean[]) => {
          this.customBeans = data;
          console.log(data);
        },
          (error: any) => {
          console.log(error);
        });
    this.systemService.getAllBeans()
      .subscribe(
        (data: Bean[]) => {
          this.allBeans = data;
          console.log(data);
        },
        (error: any) => {
          console.log(error);
        });
  }

  /** Checks whether an element is expanded. */
  isExpanded(element: Bean) {
    return this.expandedElement === element;
  }

  /** Toggles the expanded state of an element. */
  toggle(element: Bean) {
    this.expandedElement = this.isExpanded(element) ? null : element;
  }



  ngAfterViewInit() {
    //this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);

    // If the user changes the sort order, reset back to the first page.
    /*  this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));

      merge(this.sort.sortChange, this.paginator.page)
        .pipe(
          startWith({}),
          switchMap(() => {
            this.isLoadingResults = true;
            return this.exampleDatabase!.getRepoIssues(
              this.sort.active,
              this.sort.direction,
              this.paginator.pageIndex,
            ).pipe(catchError(() => observableOf(null)));
          }),
          map(data => {
            // Flip flag to show that loading has finished.
            this.isLoadingResults = false;
            this.isRateLimitReached = data === null;

            if (data === null) {
              return [];
            }

            // Only refresh the result length if there is new data. In case of rate
            // limit errors, we do not want to reset the paginator to zero, as that
            // would prevent users from re-triggering requests.
            this.resultsLength = data.total_count;
            return data.items;
          }),
        )
        .subscribe(data => (this.data = data));*/
  }

}