import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd/modal';
import { FileDomain, FileInfo, PreCheckResult } from './interfaces';
import { EditorInputData } from './play.component';
import { PrecheckerComponent } from './prechecker.component';
import { UploadBoxComponent } from './upload-box.component';

@Component({
  selector: 'art-play-update',
  template: `

  <div class="modal-body ">
    <div class="row"> 
      <art-upload-box #upload [pageAndMap]="pageAndMap"  [domain]="domain" [preCheck]="updateMap" (onDetail)="onDetail($event)" i18n-name name="线稿(必选)自动转svg" acceptText="svg/png/jpeg" accept="image/svg+xml,image/png,image/jpeg, image/jpg" ></art-upload-box>
    </div>

    <div *ngIf="domain == domains.raw" class="form-check text-center p-1">
      <label nz-checkbox [(ngModel)]="updateMap" i18n>更新Map</label>
      <div class="text-info text-center" i18n>
          (如需更新Map，请先勾选"更新Map"，再上传图片)
      </div>
    </div>

    <div *ngIf="updateMap" class="text-danger text-center" i18n>
        原先对Map图的所有修改，以及上色信息都会丢失，请慎重选择！
    </div>

    <div *ngIf="domain == domains.special || domain == domains.rawColored" class="form-check text-center p-1">
      <label nz-checkbox [(ngModel)]="autoColor" i18n>自动吸取颜色</label> 
    </div>
  </div>

  <div class="d-flex flex-row-reverse">
    <button [disabled]="!uploadBox?.isReady" class="btn btn-primary m-2" (click)="data.emit(getUpdateFis())" i18n>更新</button>
    <button *ngIf="uploadBox?.isReadyButCheckFailed" [disabled]="!uploadBox?.isReadyButCheckFailed" 
      class="btn btn-warning m-2" (click)="data.emit(getUpdateFis())" i18n>仍然更新</button>
  </div>

  `,
  styles: [
    `
    .row{
      display:flex;
      flex-direction:row;
      justify-content:center;
      align-items: center;
    }
   
    `
  ]
})
export class PlayUpdateComponent implements OnInit, AfterViewInit {

  @Output('data') data: EventEmitter<FileInfo[]> = new EventEmitter();
  @Output('cancel') cancel: EventEmitter<void> = new EventEmitter();
  @Input('domain') domain: FileDomain;

  @ViewChild('upload') uploadBox: UploadBoxComponent;

  private _dataInput: EditorInputData;
  @Input('dataInput')
  set dataInput(input: EditorInputData) {
    this._dataInput = input;
    console.log('pageAndMap:', input);
    let dumyBlob = new Blob([]);
    this.pageAndMap = [
      { blob: dumyBlob, image: input.page, domain: FileDomain.page },
      { blob: dumyBlob, image: input.map, domain: FileDomain.map },
    ];
  }

  pageAndMap: FileInfo[];


  updateMap: boolean = false;
  autoColor: boolean = false;

  rawFis: FileInfo[] = [];

  constructor(
    private modal: NzModalService,
    private viewContainerRef: ViewContainerRef,
  ) { }
  ngAfterViewInit(): void {
    this.uploadBox._onChange.subscribe((fis: FileInfo[]) => {
      this.rawFis = fis;
    })
  }

  ngOnInit() {

  }

  getUpdateFis(): FileInfo[] {
    if (FileDomain.raw == this.domain) {
      if (this.updateMap)
        return this.rawFis;
      else return this.rawFis.filter(fi => FileDomain.raw == fi.domain 
        || FileDomain.page == fi.domain || FileDomain.org == fi.domain); //remove map
    } else {
      if (this.autoColor)
        return this.rawFis;
      else return this.rawFis.filter(fi => (fi.domain == FileDomain.special || fi.domain == FileDomain.rawColored)); //remove colorMap
    }
  }

  public domains = FileDomain;


/**
 * 对话框展示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();
    })
  }

}
