import {
  Component,
  OnInit,
  ViewChild,
  EventEmitter,
  Output,
  NgZone
} from '@angular/core';
import { MainPageService } from './../../../main-page.service';
import { Router } from '@angular/router';
import { CrossSectionModel } from '../../../../models/parts/cross-section.model';
import { mockedPicture } from './mock-picture-base64';
import { mockedStepFile } from './mock-step-file-base64';
import { SystemModel } from '../../../../models/dictionaries/system.model';
import { ShowViewerArgs } from '../../../../models/viewer/ShowViewerArgs.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';


@Component({
  selector: 'app-cross-section-managment',
  templateUrl: './cross-sections-managment.component.html',
  styleUrls: ['./cross-sections-managment.component.scss']
})
export class CrossSectionManagmentComponent implements OnInit {
  @ViewChild('fileUploadInput') fileInput;
  @Output() onShowViewer: EventEmitter<ShowViewerArgs> = new EventEmitter();

  public crossSectionData: any;
  public editedCrossSection = new CrossSectionModel();
  public showPicture = false;
  public canOpenGraphicalTool = false;
  private stpConvertTaskId: string;
  public mockedPictureBase64 = mockedPicture;
  public mockedStepFileBase64 = mockedStepFile;
  public isStpVisible = false;
  public isPngVisible = false;
  public pictureData: string;
  systemsArray: SystemModel[] = [];
  public formGroup: FormGroup;

  constructor(private mainPageService: MainPageService, private zone: NgZone) {}

  public ngOnInit(): void {
    this.loadData();
    this.createForm();
   }

   loadData(): void {
    this.mainPageService.loadAllSystems().subscribe((response) => {
      this.systemsArray = response;
    });
   }

  showCrossSection(sender) {
    this.crossSectionData = sender;
    this.editedCrossSection = {
      ...this.crossSectionData
    };
    this.setFilesData(sender);
    this.canOpenGraphicalTool = sender.isProtoConverted === true;
  }

  upload(): void {
    this.readThis(this.fileInput.nativeElement.files[0]);
  }

  readThis(inputFile: any): void {
    const file: File = inputFile;
    const myReader: FileReader = new FileReader();
    const scope = this;
    myReader.onloadend = function() {
      if (file.name.includes('.stp') || file.name.includes('.step')) {
        scope.isStpVisible = true;
        scope.sendSTPFile(myReader.result, scope.crossSectionData._id);
      } else {
        scope.zone.run(() => scope.pictureData = myReader.result);
        scope.isPngVisible = true;
        scope.sendPictureFile(myReader.result, scope.crossSectionData._id);
      }
    };
    myReader.readAsDataURL(file);
  }

  checkIfStpIsConverted(): void {
    const self = this;
    setTimeout(() => {
      self.mainPageService.checkTaskStatus(self.stpConvertTaskId)
      .subscribe((resp) => {
        if (resp.isFinished === true) {
          self.zone.run(() => self.canOpenGraphicalTool = resp.result);
          //self.canOpenGraphicalTool = resp.result;
        } else {
          self.checkIfStpIsConverted();
        }
      });
    }, 2000);
  }
  sendSTPFile(file, id): void {
    this.canOpenGraphicalTool = false;
    this.mainPageService.sentSTPFileForCrossSections(file, id)
        .subscribe((response) => {
          this.crossSectionData.stepFile = response.fileId;
          this.stpConvertTaskId = response.id;
          console.log(response);
          this.checkIfStpIsConverted();
        },
        (error: any) => {
          console.log(error);
        }
      );
  }
  sendPictureFile(picture, id) :void {
    this.mainPageService.sendPicture(picture, id)
        .subscribe((response) => {
          this.crossSectionData.picture = response.fileId;
        },
        (error: any) => {
          console.log(error);
        }
      );
  }

  openGraphicalTool(): void {
    this.onShowViewer.emit(new ShowViewerArgs(true, this.crossSectionData._id, 'CROSS_SECTION', null));
    //this.router.navigate(['/stp-configure']);
  }

  save(): void {
    Object.assign(this.crossSectionData, this.editedCrossSection);
    // this.mainPageService.mysubject.next(this.crossSectionData._id);
    
    this.mainPageService.updateCrossSectionInDb(JSON.stringify(this.crossSectionData)).subscribe(() => { });
  }

  deletePicture() {
    this.pictureData = '';
    this.isPngVisible = false;
    this.mainPageService.deleteFile(this.crossSectionData.picture).subscribe(() => {
    },
      () => {
      }
    );
    this.crossSectionData.picture = null;
  }

  deleteStepFile() {
    this.isStpVisible = false;
    this.mainPageService.deleteFile(this.crossSectionData.stepFile).subscribe(() => {
    },
      () => {
      }
    );
    this.crossSectionData.stepFile = null;
  }

  setFilesData(crossSection) {
    if(crossSection.picture !== undefined && crossSection.picture !== null && crossSection.picture !== "") {
      this.isPngVisible = true;
      this.mainPageService.getPicture(crossSection.picture).subscribe((res) => {
          this.pictureData = res.src;
        },
        (error: any) => {
          console.log(error);
        }
      );
    } else {
      this.pictureData = '';
      this.isPngVisible = false;
    }

    if(crossSection.stepFile !== undefined && crossSection.stepFile !== null && crossSection.stepFile !== "") {
      this.isStpVisible = true;
    } else {
      this.isStpVisible = false;
    }
  }

  deleteCrossSection() {
    this.mainPageService.removeCrossSection(this.crossSectionData._id).subscribe(() => { }, () => { });
    this.mainPageService.deleteCrossSectionSubject.next(this.crossSectionData._id);
  }

  private createForm() {
    this.formGroup = new FormGroup({
      name: new FormControl(this.editedCrossSection.name, Validators.required),
      description: new FormControl(this.editedCrossSection.description),
      system: new FormControl(this.editedCrossSection.system, Validators.required),
      duenqName: new FormControl(this.editedCrossSection.duenqName, Validators.maxLength(50)),
    });
  }
}