import { AfterViewInit, Component, EventEmitter, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd/modal';
import { Centers } from 'src/app/lib/filler/common/interfaces';
import Utils from 'src/app/lib/filler/common/utils';
import { ArtMeta, ArtUpload, FileDomain, FileInfo, PreCheckResult } from './interfaces';
import { PrecheckerComponent } from './prechecker.component';
import { UploadBoxComponent } from './upload-box.component';



@Component({
  selector: 'art-upload',
  template: `
  <div class="d-flex flex-row justify-content-center align-items-center p-5">
    <art-upload-box #raw  [domain]="domain.raw" [preCheck]="true" (onDetail)="onDetail($event)"></art-upload-box>
    <art-upload-box #colored  [domain]="domain.rawColored" ></art-upload-box>
    <art-upload-box #special  [domain]="domain.special"  ></art-upload-box>
  </div>

  <div class="text-center">
    <button class="btn btn-primary m-2" [disabled]="!isReady"  (click)="next()" i18n>下一步</button>
    <button *ngIf="isReadyButCheckFailed" class="btn btn-warning m-2" [disabled]="!isReadyButCheckFailed"  (click)="next()" i18n>仍然继续</button>
  </div>


  `,
  styles: [
    `
    .row{
      display:flex;
      flex-direction:row;
      justify-content:center;
      align-items: center;
    }

    form{
      width:400px;
      margin:0 auto;
    }
   
    `
  ]
})
export class UploadComponent implements OnInit, AfterViewInit {

  @ViewChild('raw') raw: UploadBoxComponent;
  @ViewChild('colored') colored: UploadBoxComponent;
  @ViewChild('special') special: UploadBoxComponent;

  @Output('data') data = new EventEmitter<ArtUpload>();

  showErrors : boolean = false;

  constructor(
    private modal: NzModalService,
    private viewContainerRef: ViewContainerRef,) {
   
  }

  next() {
    let artMeta :ArtMeta = {}
    let fis = this.rawFis.concat(this.coloredFis).concat(this.specialFis);
    if (this.colored.needRefreshMap) { // 如果同时上传了上色底稿并且勾选了阴影识别， 那么map已经重新生成过了，之前precheck生成的centers需要删掉
      let idx = fis.findIndex(e => { return e.domain == FileDomain.centers});
        if (idx >= 0) {
          fis.splice(idx, 1);
        }
    }
    let artUpload : ArtUpload = {fis, artMeta};
    this.data.emit(artUpload);
  }

  domain = FileDomain; 

  rawFis: FileInfo[] = [];
  coloredFis: FileInfo[] = [];
  specialFis: FileInfo[] = [];

  ngOnInit() {

  }

  
  ngAfterViewInit() {
    this.raw._onChange.subscribe((e) => {
      this.rawFis = e as FileInfo[];
      this.colored.pageAndMap = this.rawFis;
      this.special.pageAndMap = this.rawFis;
    });
    this.colored._onChange.subscribe(e => {
      this.coloredFis = e as FileInfo[];
      // 新map替换旧map
      let map = this.coloredFis.find(e => { return e.domain == FileDomain.map;});
      if (map) {
        let idx = this.rawFis.findIndex(e => { return e.domain == FileDomain.map});
        if (idx >= 0) {
          this.rawFis.splice(idx, 1);
        }
      }
    });
    this.special._onChange.subscribe(e => {
      this.specialFis = e as FileInfo[];
    });
  }


  /**
   * 所有文件都已经处理完毕
   */
  get isReady() {
    return this.raw?.isReady && this.colored?.isReady && this.special?.isReady;
  }

  get isReadyButCheckFailed() {
    return this.raw?.isReadyButCheckFailed && this.colored?.isReady && this.special?.isReady;
  }


  /**
   * 对话框展示preckeck详情
   * @param result 
   */
  onDetail(result: PreCheckResult) {
    const modal = this.modal.create({
      nzCentered: true,
      nzWidth: '100vw',
      nzContent: PrecheckerComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzComponentParams: {
        raw: result.raw,
        page: result.page,
        map: result.map,
        centers: result.centers,
        R: result.R,
        N: result.N,
      },
      nzFooter: null,
    });

    modal.componentInstance.onReturn.subscribe((e) => {
      modal.close();
    })
  }

  
  
}


