import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { lastValueFrom } from 'rxjs';
import { GenericService } from 'src/app/services/generic/generic.service'; 
import { ResourcesService } from 'src/app/services/resources/resources.service';

@Component({
  selector: 'app-plantilla2',
  templateUrl: './plantilla2.component.html',
  styleUrls: ['./plantilla2.component.css'],
})
export class Plantilla2Component implements AfterViewInit {
  public dataSource: MatTableDataSource<string>;
  public columnSource: Array<string> = [];
  public table_name: string = '';
  public column_enable: any;
  public acciones: any = {};
  public btn_register_enable: boolean = false;

  public isLoading: boolean = false;

  // ---- SmartPage ----
  public btnSmall: boolean = false;
  public card_size = 'card-size-normal mat-elevation-z8';
  public colPaginator1: number = 7;
  public colPaginator2: number = 2;
  public colPaginator3: number = 1;
  public colPaginator4: number = 2;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(
    private _genericService: GenericService,
    private _resourceService: ResourcesService
  ) {
    this.dataSource = new MatTableDataSource();
    this.generateTable();
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    if (window.innerWidth < 804) {
      this.colPaginator1 = 0;
      this.colPaginator2 = 6;
      this.colPaginator3 = 6;
      this.colPaginator4 = 12;
    } else if (window.innerWidth <= 1210) {
      this.colPaginator1 = 4;
      this.colPaginator2 = 3;
      this.colPaginator3 = 2;
      this.colPaginator4 = 3;
    } else if (window.innerWidth > 1210) {
      this.colPaginator1 = 7;
      this.colPaginator2 = 2;
      this.colPaginator3 = 1;
      this.colPaginator4 = 2;
    }

    if (window.innerWidth <= 700) {
      this.btnSmall = true;
      this.card_size = 'card-size-small';
    } else if (window.innerWidth > 700) {
      this.btnSmall = false;
      this.card_size = 'card-size-normal mat-elevation-z8';
    }
  }

  private async generateTable() {
    this.isLoading = true;
    let generate = {
      codigo_menu: 1,
      codigo_tabla_dinamica: 1,
      conditions: []
    };
    await lastValueFrom(this._genericService.generateTable(generate)).then(
      (data: any) => {
        if (!data.error) {
          this.dataSource.data = data.response.data;
          this.columnSource = data.response.columns;
          this.table_name = data.response.table_name;
          this.acciones = data.response.acciones;
          this.btn_register_enable = data.response.btn_register_enable;
          this.column_enable =
            this.acciones.editar ||
            this.acciones.bloquear ||
            this.acciones.eliminar ||
            this.acciones.ver_docs ||
            this.acciones.ver_info;
        }
      },
      (error: any) => this._resourceService.checkErrors(error)
    );
    this.isLoading = false;
  }

  public async register() {}

  // Método de reacomodo de los elementos
  public onResize(event: any) {
    if (event.target.innerWidth < 804) {
      this.colPaginator1 = 0;
      this.colPaginator2 = 6;
      this.colPaginator3 = 6;
      this.colPaginator4 = 12;
    } else if (event.target.innerWidth <= 1210) {
      this.colPaginator1 = 4;
      this.colPaginator2 = 3;
      this.colPaginator3 = 2;
      this.colPaginator4 = 3;
    } else if (event.target.innerWidth > 1210) {
      this.colPaginator1 = 7;
      this.colPaginator2 = 2;
      this.colPaginator3 = 1;
      this.colPaginator4 = 2;
    }

    if (event.target.innerWidth <= 700) {
      this.btnSmall = true;
      this.card_size = 'card-size-small';
    } else if (event.target.innerWidth > 700) {
      this.btnSmall = false;
      this.card_size = 'card-size-normal mat-elevation-z8';
    }
  }
}
