import { Component, OnInit, ViewChild } from "@angular/core";
import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MatDialog } from "@angular/material/dialog";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatButtonModule } from "@angular/material/button";

import { GearService } from "../../services/gear.service";
import { ServiceComm } from "../../services/service-comm.service";
import { GearResp } from "../../models/gear";
import { AddAction } from "../../models/add-action.enum";
import { NewGearComponent } from "../new-gear/new-gear.component";

@Component({
  selector: "app-list-of-gears",
  templateUrl: "./list-of-gears.component.html",
  styleUrls: ["./list-of-gears.component.css"],
  imports: [
    TranslateModule,
    CommonModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatTableModule,
    MatButtonModule,
  ],
})
export class ListOfGearsComponent implements OnInit {
  public displayedColumns: Array<string> = [
    "name",
    "manufacturer",
    "maxSize",
    "aad",
    "mainCanopy",
    "reserveCanopy",
  ];
  public dataSourceTable: MatTableDataSource<GearResp>;
  public resultsLength = 0;
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

  constructor(
    private serviceApi: GearService,
    private serviceComm: ServiceComm,
    public dialog: MatDialog,
    private translateService: TranslateService
  ) {}

  ngOnInit() {
    this.serviceComm.refreshRequest.subscribe((action) => {
      if (action === AddAction.Gear) {
        this.dialog.closeAll();
        this.getListOfGears();
      }
    });
    this.serviceComm.forceTranslateTitle.subscribe((data) => {
      if (data === true) {
        this.updateTitle();
      }
    });

    this.updateTitle();
    this.getListOfGears();
  }

  getListOfGears() {
    this.serviceApi.getListOfGears().subscribe((data) => {
      setTimeout(() => {
        data.sort((a, b) => b.id - a.id);
        this.dataSourceTable = new MatTableDataSource<GearResp>(data);
        this.dataSourceTable.paginator = this.paginator;
        this.resultsLength = data.length;
      }, 500);
    });
  }

  openDialogToAdd() {
    this.dialog.open(NewGearComponent, {
      height: "400px",
      width: "600px",
    });
  }

  private updateTitle() {
    this.translateService.get("ListGears_Title").subscribe((data) => {
      this.serviceComm.updatedComponentTitle(data);
    });
  }
}
