import { AfterViewInit, Component, Input, ViewChild, inject, viewChild } from '@angular/core';
import { EnvelopeService } from '../../../services/envelope.service';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { ConfigurationService } from '../../../services/configuration.service';
import { DDTable } from "../dd-table/dd-table.component";
import { ClearableInputComponent } from '../../clearable-input/clearable-input.component'
import { MatTabsModule } from '@angular/material/tabs';
import { ReceiverStatusTableComponent } from "../receiver-status-table/receiver-status-table.component";
import { HistoryTableComponent } from "../history-table/history-table.component";
import { EnvelopeReceiverService } from '../../../services/envelope-receiver.service';
import { HistoryService } from '../../../services/history.service';

@Component({
  selector: 'envelope-table',
  standalone: true,
  imports: [DDTable, ClearableInputComponent, MatTabsModule, ReceiverStatusTableComponent, HistoryTableComponent],
  templateUrl: './envelope-table.component.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  styleUrl: './envelope-table.component.scss'
})
export class EnvelopeTableComponent implements AfterViewInit {

  @Input() options?: { min_status?: number; max_status?: number; ignore_status?: number[] }

  displayedColumns: string[] = ['title', 'status', 'type', 'addedWhen'];

  schema: Record<string, { header: string; field: (element: any) => any; }> = {
    'title': {
      header: 'Title',
      field: (element: any) => element.title
    },
    'status': {
      header: 'Status',
      field: (element: any) => element.statusName
    },
    'type': {
      header: 'Type',
      field: (element: any) => this.config.envelopeTypeTitles[element.contractType - 1]
    },
    'addedWhen': {
      header: 'Added When',
      field: (element: any) => element.addedWhen
    }
  }

  data: any[] = [];

  @ViewChild(ReceiverStatusTableComponent) rsTable!: ReceiverStatusTableComponent

  @ViewChild(HistoryTableComponent) histTable!: HistoryTableComponent

  onToggleExpandedRow: (envelope: any, event: Event) => Promise<void> = async (envelope, event) => {
    if (envelope === null || envelope === undefined)
      return;

    var uuid: string = envelope.uuid;
    this.rsTable.data = await this.erService.getSecretAsync(uuid);

    var id: number = envelope.id;
    var refType: number = this.config.referenceType.receiver;
    const histories = await this.histService.getHistoryAsync({ envelopeId: id, referenceType: refType, withReceiver: true })
    this.histTable.data = histories;
  }

  private eService: EnvelopeService = inject(EnvelopeService);

  private config: ConfigurationService = inject(ConfigurationService);

  private readonly erService: EnvelopeReceiverService = inject(EnvelopeReceiverService);

  private readonly histService: HistoryService = inject(HistoryService);

  async ngAfterViewInit() {
    this.data = await this.eService.getEnvelopeAsync(this.options);
  }
}