import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DetailsArtitleComponent } from '../../../acquisition/purchase-line/details-artitle/details-artitle.component';

const DATA_EXAMPLE: Array<any> = [
  {
    numeroArticulo: '000000001',
    familia: 'Hábitat',
    subfamilia: 'Extractor para baño',
    articulo: 'SILENT',
    modelo: 'SILENT 100',
    codigo: 'TSILENT-100',
    cantidad: '12',
  },
  {
    numeroArticulo: '000000002',
    familia: 'Hábitat',
    subfamilia: 'Extractor para baño',
    articulo: 'SILENT',
    modelo: 'SILENT 200',
    codigo: 'TSILENT-200',
    cantidad: '12',
  },
  {
    numeroArticulo: '000000003',
    familia: 'Hábitat',
    subfamilia: 'Extractor para baño',
    articulo: 'SILENT',
    modelo: 'SILENT 300',
    codigo: 'TSILENT-400',
    cantidad: '12',
  },
]

@Component({
  selector: 'app-selected-information',
  templateUrl: './selected-information.component.html',
  styleUrls: ['./selected-information.component.css']
})
export class SelectedInformationComponent implements OnInit {

  public displayedColumns: string[] = [
    'ITEM1',
    'ITEM2',
    'ITEM3',
    'ITEM4',
    'ITEM5',
    'ITEM6',
    'ITEM7',
    'ITEM8',
  ];

  public dataSource: any;

  public isLoading: boolean = false;
  public isLoadingForm: boolean = false;

  // ---- SmartPage ----
  public btnSmall: boolean = false;
  public card_size = 'card-size-normal mat-elevation-z8';

  constructor(
    public dialog: MatDialog
  ) {
    this.dataSource = DATA_EXAMPLE;
  }

  ngOnInit(): void {
    this.onResize();
  }

  public openDialog(action: string, data: any = null) {
    if (action === 'VIEW') {
      const dialogRef = this.dialog.open(DetailsArtitleComponent, {
        width: '800px',
        disableClose: true,
      });
    }
  }

  // Método para reajustar la pantalla
  public onResize() {
    if (window.innerWidth <= 1400) {
      this.btnSmall = true;
      this.card_size = 'card-size-small';
    } else if (window.innerWidth > 1400) {
      this.btnSmall = false;
      this.card_size = 'card-size-normal mat-elevation-z8';
    }
  }

}
