import {Component, inject, OnInit} from '@angular/core';
import {Observable} from "rxjs";
import {Qualification} from "../Qualification";
import {AsyncPipe} from "@angular/common";
import {
  MatCell, MatCellDef,
  MatColumnDef,
  MatHeaderCell,
  MatHeaderCellDef,
  MatHeaderRow, MatHeaderRowDef,
  MatRow, MatRowDef,
  MatTable
} from "@angular/material/table";
import QualificationService from "../services/qualification.service";
import {MatDialog} from "@angular/material/dialog";
import {CreateQualificationComponent} from "../create-qualification/create-qualification.component";

@Component({
  selector: 'app-qualifications',
  imports: [
    AsyncPipe,
    MatTable,
    MatHeaderCell,
    MatColumnDef,
    MatCell,
    MatHeaderRow,
    MatRow,
    MatHeaderCellDef,
    MatCellDef,
    MatHeaderRowDef,
    MatRowDef
  ],
  templateUrl: './qualifications.component.html',
  styleUrl: './qualifications.component.css'
})
export class QualificationsComponent implements OnInit{
  public qualifications$!: Observable<Qualification[]>;
  public readonly displayedColumns: string[] = ['skill', 'actions'];

  private readonly dialog: MatDialog = inject(MatDialog);
  private readonly qualificationService: QualificationService = inject(QualificationService);

  ngOnInit() {
    this.loadQualifications();
  }

  private loadQualifications() {
    this.qualifications$ = this.qualificationService.getAll();
  }

  openCreateModal() {
    const dialogRef = this.dialog.open(CreateQualificationComponent);

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.loadQualifications();
      }
    });
  }
}