import {
  Component,
  OnInit,
  ViewChild,
  EventEmitter,
  Output,
  NgZone
} from '@angular/core';
import { MainPageService } from './../../../main-page.service';
import { Router } from '@angular/router';
import { ConnectorVariantModel } from '../../../../models/parts/connectorVariant.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { SystemModel } from '../../../../models/dictionaries/system.model';
import { ShowViewerArgs } from '../../../../models/viewer/ShowViewerArgs.model';
import { CorosiveProtectionModel } from '../../../../models/dictionaries/corosive-protection.model';
import { UniversalConnectorModel, ConnectorType } from '../../../../models/parts/universal-connector.model';
import { DesignBaseModel } from '../../../../models/dictionaries/design-base.model';

// declare var $: any;

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

  public pipeFasteningData: any;
  public editedPipeFastening = new UniversalConnectorModel(ConnectorType.PipeFastening);
  public editedVariant = new ConnectorVariantModel();
  public variantTemplateModel = new ConnectorVariantModel();
  public showPicture = false;
  public canOpenGraphicalTool = false;
  private stpConvertTaskId: string;
  public currentVariantTabId = '';
  public currentVariantTab = 0;
  public isStpVisible = false;
  public isPngVisible = false;
  public pictureData: string;
  public systemsArray: SystemModel[] = [];
  public corrosionProtectionsArray: CorosiveProtectionModel[] = [];
  public designBasesArray: DesignBaseModel[] = [];
  public pipeFasteningGroupsArray: any[] = [];
  public choosenDesignBase: string;
  private duplicateMode = false;
  public formGroup: FormGroup;
  public variantFormGroup: FormGroup;
  public pipeFasteningGroupName: string = null;

  ////////////////////////////////////////// temporary mocked variables
  public headersVariantGrid: string[] = ['Vertification', 'Method', 'Fx+', 'Fx-'];
  public displayedColumns: string[] = ['Vertification', 'Method', 'Fx+', 'Fx-'];
  public variantsList: ConnectorVariantModel[] = [];
  ///////////////////////////////////////////


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

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

  loadData(): void {
    this.mainPageService.loadAllSystems().subscribe((response) => {
      this.systemsArray = response;
    });
    this.mainPageService.loadAllCorosionProtections().subscribe((response) => {
      this.corrosionProtectionsArray = response;
    });
    this.mainPageService.loadAllDesignBases().subscribe((response) => {
      this.designBasesArray = response;
      this.choosenDesignBase = this.designBasesArray[0]._id;
    });
    this.mainPageService.loadAllPipeFasteningGroups().subscribe((response) => {
      this.pipeFasteningGroupsArray = response;
    });
  }

  loadBaseVariants() {
    this.mainPageService.loadAllConnectorVariants(this.pipeFasteningData._id).subscribe((response) => {
      this.variantsList = response;
      if (this.variantsList.length > 0) {
        Object.assign(this.editedVariant, this.variantsList[this.currentVariantTab]);
      }
      if (this.variantsList.length > 0) {
        this.currentVariantTabId = this.variantsList[this.currentVariantTab]._id;
      }
    });
  }

  showPipeFastening(sender) {
    this.currentVariantTab = 0;
    this.currentVariantTabId = '';
    this.pipeFasteningData = sender;
    this.editedPipeFastening = {
      ...this.pipeFasteningData
    };
    this.setFilesData(sender);
    this.canOpenGraphicalTool = sender.isProtoConverted === true;
    this.loadBaseVariants();
    this.findFasteningGroupById();
  }

  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.pipeFasteningData._id);
      } else {
        scope.zone.run(() => scope.pictureData = myReader.result);
        scope.isPngVisible = true;
        scope.sendPictureFile(myReader.result, scope.pipeFasteningData._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.sentSTPFileForConnectors(file, id)
      .subscribe((response) => {
        this.pipeFasteningData.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.pipeFasteningData.picture = response.fileId;
      },
        (error: any) => {
          console.log(error);
        }
      );
  }

  openGraphicalTool(): void {
    this.onShowViewer.emit(new ShowViewerArgs(true, this.pipeFasteningData._id, 'PIPE_FASTENING', null));
  }

  openVariantGraphicalTool(variantId): void {
    this.onShowViewer.emit(new ShowViewerArgs(true, this.pipeFasteningData._id, 'PIPE_FASTENING', variantId));
  }

  save(): void {
    Object.assign(this.pipeFasteningData, this.editedPipeFastening);
    // this.mainPageService.mysubject.next(this.pipeFasteningData._id);
    this.mainPageService.updateUniversalConnectorInDb(JSON.stringify(this.pipeFasteningData)).subscribe(() => { });
    this.findFasteningGroupById();
  }

  changeVariantTab(id) {
    this.currentVariantTabId = id;
    for (let i = 0; i < this.variantsList.length; i++) {
      if (this.variantsList[i]._id === this.currentVariantTabId) {
        this.currentVariantTab = i;
        Object.assign(this.editedVariant, this.variantsList[this.currentVariantTab]);
      }
    }
  }

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

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

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

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

  deletePipeFastening() {
    this.mainPageService.removeUniversalConnector(this.pipeFasteningData._id).subscribe(() => { }, () => { });
    this.mainPageService.deleteUniversalConnectorSubject.next(this.pipeFasteningData._id);
    this.pipeFasteningData = null;
  }

  saveNewVariant() {
    this.variantTemplateModel.variantId = this.pipeFasteningData._id;
    this.sendVariantToDb(this.variantTemplateModel);
  }

  sendVariantToDb(variant) {
    this.mainPageService.addNewConnectorVariantIntoDb(JSON.stringify(variant))
      .subscribe((response) => {
        console.log(response);
        this.variantsList.push(response);
        if (this.variantsList.length === 1) {
          Object.assign(this.editedVariant, this.variantsList[this.currentVariantTab]);
        }
        if (this.duplicateMode) {
          this.mainPageService.duplicateVariantData(
            this.variantsList[this.currentVariantTab]._id, this.variantsList[this.variantsList.length - 1]._id).subscribe(() => { });
          this.duplicateMode = false;
        }
        this.variantTemplateModel = new ConnectorVariantModel();
        if (this.currentVariantTabId === '') {
          this.currentVariantTabId = this.variantsList[0]._id;
        }
      },
        (error: any) => {
          console.log(error);
        }
      );
  }

  duplicateVariant() {
    this.duplicateMode = true;
    const newVariant = new ConnectorVariantModel();
    Object.assign(newVariant, this.variantsList[this.currentVariantTab]);
    newVariant.name = this.variantTemplateModel.name;
    this.sendVariantToDb(newVariant);
  }

  deleteVariant() {
    this.mainPageService.removeVariant(this.variantsList[this.currentVariantTab]._id).subscribe(() => {
      const idToDelete = this.currentVariantTabId;
      if (this.currentVariantTab === (this.variantsList.length - 1) && this.currentVariantTab !== 0) {
        this.currentVariantTab -= 1;
        this.currentVariantTabId = this.variantsList[this.currentVariantTab]._id;
      }
      else if (this.currentVariantTab === 0 && this.variantsList.length === 1) {
        this.currentVariantTabId = '';
        this.currentVariantTab = 0;
      }
      else {
        this.currentVariantTabId = this.variantsList[this.currentVariantTab + 1]._id;
      }
      this.variantsList = this.variantsList.filter(variant => variant._id !== idToDelete);
      Object.assign(this.editedVariant, this.variantsList[this.currentVariantTab]);
    }, () => { });
  }

  updateVariant() {
    Object.assign(this.variantsList[this.currentVariantTab], this.editedVariant);
    this.mainPageService.updateVariantInDb(JSON.stringify(this.variantsList[this.currentVariantTab])).subscribe(() => { });
  }

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

  public prepareVariantCreate() {
    this.variantTemplateModel = new ConnectorVariantModel();
    this.createVariantForm();
  }

  private createVariantForm() {
    this.variantFormGroup = new FormGroup({
      name: new FormControl(this.variantTemplateModel.name, Validators.required),
      description: new FormControl(this.variantTemplateModel.description),
      system: new FormControl(this.variantTemplateModel.system, Validators.required),
      corrosionProtection: new FormControl(this.variantTemplateModel.corrosionProtection, Validators.required),
    });
  }

  public findFasteningGroupById() {
    const fasteningGroup = this.pipeFasteningGroupsArray.find(x => x.id === this.pipeFasteningData.pipeFasteningGroupId);
    if (fasteningGroup !== undefined && fasteningGroup !== null) {
      this.pipeFasteningGroupName = fasteningGroup.name;
    } else {
      this.pipeFasteningGroupName = null;
    }
  }
}