import {
  Component,
  OnInit,
  ViewChild,
  EventEmitter,
  Output,
  NgZone
} from '@angular/core';
import { MainPageService } from './../../../main-page.service';
import { Router } from '@angular/router';
import { ChannelModel } from '../../../../models/parts/channel.model';
import { mockedStepFile } from './mock-step-file-base64';
import { CrossSectionModel } from '../../../../models/parts/cross-section.model';
import { SystemModel } from '../../../../models/dictionaries/system.model';
import { CorosiveProtectionModel } from '../../../../models/dictionaries/corosive-protection.model';
import { MaterialModel } from '../../../../models/dictionaries/material.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';


@Component({
  selector: 'app-channels-managment',
  templateUrl: './channels-managment.component.html',
  styleUrls: ['./channels-managment.component.scss']
})
export class ChannelsManagmentComponent implements OnInit {
  @ViewChild('fileUploadInput') fileInput;
  @Output() onShowViewer: EventEmitter<boolean> = new EventEmitter();
  @Output() selectedConnectorId: EventEmitter<number> = new EventEmitter();

  public channelData: any;
  public editedChannel = new ChannelModel();
  public showPicture = false;
  public canOpenGraphicalTool = false;
  private stpConvertTaskId: string;
  public mockedStepFileBase64 = mockedStepFile;
  public isStpVisible = false;
  public isPngVisible = false;
  public pictureData: string;
  public allCrossSectionsArray: CrossSectionModel[] = [];
  public availableCrossSectionsArray: CrossSectionModel[] = [];
  public systemsArray: SystemModel[] = [];
  public corrosionProtectionsArray: CorosiveProtectionModel[] = [];
  public materialsArray: MaterialModel[] = [];
  public formGroup: FormGroup;


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

  public ngOnInit(): void {
    this.allCrossSectionsArray = [];
    this.loadData();
    this.createForm();
   }

   loadData(): void {
    this.mainPageService.loadAllCrossSections().subscribe((response) => {
      this.allCrossSectionsArray = response;
    });
    this.mainPageService.loadAllSystems().subscribe((response) => {
      this.systemsArray = response;
    });
    this.mainPageService.loadAllCorosionProtections().subscribe((response) => {
      this.corrosionProtectionsArray = response;
    });
    this.mainPageService.loadAllMaterials().subscribe((response) =>{
      this.materialsArray = response;
    });
   }

  showChannel(sender) {
    this.channelData = sender;
    this.editedChannel = {
      ...this.channelData
    };
    //this.setRandomFileOrPicture();
    this.setFilesData(sender);
    this.canOpenGraphicalTool = sender.isProtoConverted === true;
    this.selectedConnectorId.emit(sender._id);
  }

  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.channelData._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.sentSTPFileForChannels(file, id)
        .subscribe((response) => {
          this.channelData.stepFile = response.fileId;
          this.stpConvertTaskId = response.id;
          console.log(response);
          this.checkIfStpIsConverted();
        },
        (error: any) => {
          console.log(error);
        }
      );
  }

  openGraphicalTool(): void {
    this.onShowViewer.emit(true);
    //this.router.navigate(['/stp-configure']);
  }

  save(): void {
    Object.assign(this.channelData, this.editedChannel);
    // this.mainPageService.mysubject.next(this.channelData._id);
    this.mainPageService.updateChannelInDb(JSON.stringify(this.channelData)).subscribe(() => { });
  }

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

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

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

  deleteChannel() {
    this.mainPageService.removeChannel(this.channelData._id).subscribe(() => { }, () => { });
    this.mainPageService.deleteChannelSubject.next(this.channelData._id);
  }

  private createForm() {
    this.formGroup = new FormGroup({
      name: new FormControl(this.editedChannel.name, Validators.required),
      articleNumber: new FormControl(this.editedChannel.articleNumber),
      description: new FormControl(this.editedChannel.description),
      system: new FormControl(this.editedChannel.system, Validators.required),
      corrosionProtection: new FormControl(this.editedChannel.corrosionProtection, Validators.required),
      crossSection: new FormControl(this.editedChannel.crossSection, Validators.required),
      material: new FormControl(this.editedChannel.material, Validators.required),
    });
  }

  public filterCrossSections() {
    this.availableCrossSectionsArray = this.allCrossSectionsArray.filter(x => x.system === this.editedChannel.system);
  }
}