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 { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon";

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";
import { GearInfosComponent } from "../gear-infos/gear-infos.component";

@Component({
    selector: "app-list-of-gears",
    templateUrl: "./list-of-gears.component.html",
    styleUrls: ["./list-of-gears.component.css"],
    imports: [
        TranslateModule,
        MatPaginatorModule,
        MatProgressSpinnerModule,
        MatTableModule,
        MatButtonModule,
        MatIconModule,
    ],
})
export class ListOfGearsComponent implements OnInit {
    public displayedColumns: Array<string> = [
        "name",
        "manufacturer",
        "maxSize",
        "aad",
        "mainCanopy",
        "reserveCanopy",
        "actions",
    ];
    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",
        });
    }

    openDialog(item: GearResp, editMode: boolean) {
        this.dialog.open(GearInfosComponent, {
            data: { gear: item, editMode: editMode },
            maxHeight: "400px",
            minWidth: "350px",
        });
    }

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