import {Component, inject, OnInit} from '@angular/core';
import {CommonModule} from '@angular/common';
import {catchError, Observable, of, retry} from 'rxjs';
import {HttpErrorResponse} from '@angular/common/http';
import {Employee} from '../Employee';

import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
import {MatDividerModule} from '@angular/material/divider';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatMenuModule} from '@angular/material/menu';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import {MatDialog} from "@angular/material/dialog";
import {DeleteComponent} from "../delete/delete.component";
import EmployeeApiService from "../../services/employee-api.service";
import {CreateComponent} from "../create/create.component";
import {EditComponent} from "../edit/edit.component";

@Component({
  selector: 'app-employee-list',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatDividerModule,
    MatTooltipModule,
    MatMenuModule,
    MatTableModule,
    MatSortModule
  ],
  templateUrl: './table.component.html',
  styleUrl: './table.component.css'
})
export class TableComponent implements OnInit{
  private readonly apiService: EmployeeApiService = inject(EmployeeApiService);
  private readonly snackBar: MatSnackBar = inject(MatSnackBar);
  private readonly matDialog: MatDialog = inject(MatDialog);

  private static readonly MAX_RETRIES = 3;
  public employees$: Observable<Employee[]> = of([]);
  public readonly displayedColumns: string[] = ['name', 'actions'];

  public ngOnInit(): void {
    this.employees$ = this.fetchEmployees();
  }

  private fetchEmployees(): Observable<Employee[]> {
    return this.apiService.getAll().pipe(
      retry(TableComponent.MAX_RETRIES),
      catchError((error: HttpErrorResponse) => {
        console.error('Error fetching employees:', error);
        this.showErrorMessage('Failed to load employees. Please try again.');
        return of([]);
      })
    );
  }

  private showErrorMessage(message: string): void {
    this.snackBar.open(message, 'Close', {
      duration: 5000,
      horizontalPosition: 'end',
      verticalPosition: 'bottom',
      panelClass: ['!bg-red-50', '!text-red-900', '!border', '!border-red-100']
    });
  }

  protected openDeleteDialogue(employee: Employee): void {
    this.matDialog.open(DeleteComponent, {data: employee})
      .afterClosed()
      .subscribe(() => {
        this.employees$ = this.fetchEmployees();
      });
  }

  protected showCreateEmployeeModal() {
    this.matDialog.open(CreateComponent)
      .afterClosed()
      .subscribe(() => {
      this.employees$ = this.fetchEmployees();
    });
  }

  protected showEditEmployeeModal(employee: Employee) {
    this.matDialog.open(EditComponent, {data: employee})
      .afterClosed()
      .subscribe(() => {
        this.employees$ = this.fetchEmployees();
      });
  }
}