import { Component, Inject, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { DataInformationArticle, DialogDataFormInformation } from '../../../../../interfaces/acquisition-management/artitle.interface';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { ResourcesService } from '../../../../../services/resources.service';
import { ArtitleDetailsFormComponent } from '../artitle-details-form/artitle-details-form.component';
import { AlertComponent } from '../../../../resources/dialogs/alert/alert.component';

@Component({
    selector: 'app-artitle-details',
    templateUrl: './artitle-details.component.html',
    styleUrl: './artitle-details.component.css',
    standalone: false
})
export class ArtitleDetailsComponent implements OnInit {
  public displayedColumnsDetails: Array<string>;
  public dataSource: MatTableDataSource<DataInformationArticle>;
  public isLoading: boolean;

  constructor(
    @Inject(MAT_DIALOG_DATA) public arrDataInformation: DataInformationArticle[],
    private _dialog: MatDialog,
    private _dialogRef: MatDialogRef<any>,
    public resourcesService: ResourcesService,
  ) {
    this.displayedColumnsDetails = ['CODIGO','MODELO','PRECIO','ESTADO','ACCIONES'];
    this.dataSource = new MatTableDataSource<DataInformationArticle>();
    this.isLoading = false;
  }
  
  ngOnInit(): void {
    this.isLoading = true;
    this.dataSource.data = this.arrDataInformation;
    this.isLoading = false;
  }

  public openDialogForm (type: 'R' | 'M', index?: number) {

    let formInformation: DialogDataFormInformation = {} as DialogDataFormInformation;
    formInformation.type = type;
    formInformation.data = (type === 'M' && index !== undefined) ? this.dataSource.data[index] : null; 
  
    this._dialog.open(ArtitleDetailsFormComponent, {
      data: formInformation,
      disableClose: true,
      width: '1000px',
      maxWidth: '1000px',
    }).afterClosed().subscribe(
      (response) => {
        
        if (response && type === 'R') {
          let datasource = this.dataSource.data;
          datasource.push(response);
          this.dataSource.data = datasource;
        } else if (response && type === 'M' && index !== undefined) { 
          let datasource = this.dataSource.data;
          datasource[index] = response;
          this.dataSource.data = datasource;
        }
      }
    );
  }

  public updateState (type: 'E' | 'A', index: number) {
    this._dialog.open(AlertComponent, {
      data: {
        title: `Confirmación`,
        description: `¿Está seguro de modificar el estado de la información del artículo?`,
        icon: `warning`,
      }
    }).afterClosed().subscribe(
      (response) => {
        if (response && type === 'E') {
          let datasource = this.dataSource.data;
          datasource[index].ESTADO = `Eliminado`;
          this.dataSource.data = datasource;
        } else if (response && type === 'A') {
          let datasource = this.dataSource.data;
          datasource[index].ESTADO = `Activo`;
          this.dataSource.data = datasource;
        }
      }
    );
  }

  public save() {
    this._dialogRef.close(this.dataSource.data)
  }
}
