import { Component, ElementRef,Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { format, parseISO } from 'date-fns';
import { Subscription } from 'rxjs';
import { TableEstornoService } from 'src/app/services/table-estorno.service';
import { delegate } from 'utils-decorators';
import { TableEstornoData } from '../../../data/table-estorno.data';
import { AuthService } from '../../../services/auth.service';
import { BlockService } from '../../../services/block.service';
import { LoadingService } from '../../../services/loading.service';
import { ToastService } from '../../../services/toast.service';
import {ModalLiberacaoComponent} from '../liberacao/modal-liberacao//modal-liberacao.component'
import {TableEstornoLiberacaoDTO} from '../../../dto/tableEstornoLiberacaoDTO';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit, OnDestroy {

  @Input()
  theadTable;


  @Input()
  dadosGrid?: TableEstornoLiberacaoDTO[];
  //
  theadTableModal =
                    {
                    proposta:  [ "Produto","Proposta","Data","Valor(R$)","Status Proposta"]
                   ,titulo:    ["Produto","Título","Série","Status tit"]
                   ,pagamento: ['Produto','Proposta','Data','Valor(R$)','Status Proposta']
                   ,boleto: ['Vencimento','Valor do Boleto','Pagamento','Valor Recebido']
                  };
  //
  dadosPagina?: TableEstornoLiberacaoDTO[];
  fichaSelecionada?: TableEstornoLiberacaoDTO;

  @Input()
  quantidadeItens: number = 0;
  @Input()
  tamanhoPagina: number = 10;
  @ViewChild(ModalLiberacaoComponent) modalLiberacao;
  //

  @ViewChild('grid', { static: true })
  grid: ElementRef<HTMLDivElement>;


  #sub?: Subscription;

  constructor(
    private tableService: TableEstornoService,
    private toast: ToastService,
    private authService: AuthService,
    private block: BlockService,
    private loading: LoadingService,
  ) { }

  async ngOnInit() {
  }

  ngOnDestroy() {
    this.#sub?.unsubscribe();
  }
  /*
  @delegate()
  async baixarPdf(ficha: TableEstornoData) {
    this.block.block(this.grid.nativeElement, 'Carregando dados...');
    try {
      const res = await this.fichaService.baixarFicha(ficha);

      window.open(res.url, '_blank');
    } catch (err) {
      console.log(err);
      this.toast.danger({
        header: 'Não foi possível acessar o PDF',
        message: 'Tente novamente mais tarde!'
      });
    } finally {
      this.block.unblock(this.grid.nativeElement, 500);
    }
  }
  */
  private carregarGrid(
                       dados : any
                       ) {
    this.block.block(this.grid.nativeElement, 'Carregando dados...');
    try {
      debugger;
      this.dadosGrid = dados;
      this.quantidadeItens = this.dadosGrid.length;
      this.setPage(1);
      //const dados = await this.tableService.listar(page, 10);
      //this.dadosGrid = dados.dados;
      //this.quantidadePaginas = dados.totalGeral;
    } catch (err) {
      console.error(err);
      this.toast.danger({
        header: 'Não foi possível carregar os dados',
        message: 'Tente novamente mais tarde!'
      });
    } finally {
      this.block.unblock(this.grid.nativeElement, 500);
    }
  }

  @delegate()
  async abreModal(linha : TableEstornoLiberacaoDTO) {
    //await this.loading.present('Carregando dados...');
    try {
      //this.acessarModal.nativeElement.checked = true;
      this.modalLiberacao.abreModal(linha);
    } catch (err) {
      console.error(err);
      this.toast.danger({
        header: 'Não foi possível carregar os dados',
        message: 'Tente novamente mais tarde!'
      });
    } finally {
      this.loading.dismiss();
    }
  }


  @delegate()
  async setPage(page: number) {
    this.dadosPagina = this.dadosGrid.slice(this.tamanhoPagina*(page-1),this.tamanhoPagina*page);
    debugger;
  }

}