import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { ImageService } from './services/image.service';

declare var jQuery: any;
declare var jinqJs: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [ImageService]
})
export class AppComponent implements AfterViewInit {
    title = 'app works!';
    context: CanvasRenderingContext2D;
    bodyViewData: any;
    imageData: any;
    imageDataCollection: Array<any>;
    imageCount: number;
    isLayerProcessCompleted: boolean;
    totalBodyViews: number;
    bodyViewIndex: number;
    currentLayer: number;
    datalayerLength: number;
    bodyRegionInLayer: Array<any>;;
    BRCounter: number;
    layerNo: string;
    bodyViewId: string;
    remainingFiles75: any;
    remainingFiles25: any;
    bodyRegionId: number;
    previousBodyViewId: number;
    counter: number;
    constructor(private imageService: ImageService) {
        this.imageData = new Object();
        this.imageDataCollection = new Array<any>();
        this.isLayerProcessCompleted = true;
        this.totalBodyViews = 12;
        this.bodyViewIndex = 2;
        this.currentLayer = 95;
        this.previousBodyViewId = 0;
        this.counter = 0;
    }

    ngAfterViewInit(): void {
     //   this.getBodyViewJson();
        //for (let i = 1; i <= 12; i++) {
        //    this.imageService.getBodyViewData(i).subscribe((data) => {
        //        this.bodyViewData = data.json();
        //        this.saveBodyViewImageData();
        //    });
        //}
    }


    getBodyViewJson() {
        console.log("inside getBodyViewJson for this.bodyViewIndex= " + this.bodyViewIndex);
        this.previousBodyViewId = this.bodyViewIndex;
        this.imageService.getBodyViewData(this.bodyViewIndex).subscribe((data) => {
            console.log("Fetched body view json for bodyViewIndex: " + this.bodyViewIndex);
            this.bodyViewData = data.json();
            this.getImageName();
        });
    }

    getImageName(): void {
          
        //var layerData = this.bodyViewData.filter(lNo => lNo._LayerNumber == this.layerNo);
        //var bodyRegiondata = layerData.filter(br => br._BodyRegionId == this.bodyRegionId);

        //var layerData = this.bodyViewData.find(findData);
        //var bodyRegiondata = layerData.filter(findData);\
        console.log("getImageName:" + this.currentLayer);
        var layerNumber = this.currentLayer  + 1;
        console.log('layerNumber= ' + layerNumber);
        var layerData = new jinqJs()
            .from(this.bodyViewData.Layers.DataLayer)
            .where('_LayerNumber == ' + layerNumber)
            .select();
        alert("layerData= " + layerData[0]);


        var bodyRegiondata = new jinqJs()
            .from(layerData[0].BodyRegion)
            .where('_BodyRegionId == ' + this.bodyRegionId)
            .select();

        alert("bodyRegiondata= " + bodyRegiondata);

        const imgName = bodyRegiondata[0].Image._ImageName.split('.')[0] + '_mci.png';
        const skintone = bodyRegiondata[0].Image._SkintTone;
        const bodyRegionId = bodyRegiondata[0]._BodyRegionId;

        console.log("inside getImageName. imgName= " + imgName + ",skintone= " + skintone);

        this.drawImage(imgName, this.bodyViewIndex, this.currentLayer, bodyRegionId, 75, skintone);

    }

     findData(layer):any {
         return layer._LayerNumber === this.layerNo;
     }
    saveBodyViewImageData(): void {
        this.datalayerLength = this.bodyViewData.Layers.DataLayer.length;
        console.log('this.datalayerLength= ' + this.datalayerLength);
        console.log('this.bodyViewData.Layers.DataLayer = ' + this.bodyViewData.Layers.DataLayer);
        this.processLayer();
        //for (let i = 0; i <= datalayerLength-1; i++) {
        //  const bodyRegions = this.bodyViewData.Layers.DataLayer[datalayerLength - i - 1].BodyRegion;
        //  let k = 1;
        //  this.imageCount = bodyRegions.length;
        //  for (let j = bodyRegions.length - 1; j >= 0; j--) {
        //    const imgName = bodyRegions[j].Image._ImageName.split('.')[0] + '_mci.png';
        //    this.drawImage(imgName, 1, i, k, 75);

        //    if (j === 0) {
        //      k = 1;
        //    } else {
        //      k = k + 1;
        //    }

        //  }
        //}
    }

    processLayer(): void {
        console.log("Processing started for layer: " + this.currentLayer + ' of bodyViewIndex: ' + this.bodyViewIndex + ', time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));
        this.imageDataCollection = null;
        this.imageDataCollection = new Array<any>();
        this.BRCounter = 1;
        this.bodyRegionInLayer = new Array<any>();
        console.log('inside processLayer. this.bodyViewData.Layers.DataLayer = ' + this.bodyViewData.Layers.DataLayer);
        //console.log('this.bodyViewData.Layers.DataLayer[63].BodyRegion = ' + this.bodyViewData.Layers.DataLayer[63].BodyRegion);
        //console.log('this.datalayerLength - this.currentLayer - 1= ' + (this.datalayerLength - this.currentLayer - 1));
         const bodyRegions = this.bodyViewData.Layers.DataLayer[this.datalayerLength - this.currentLayer - 1].BodyRegion;
        //console.log('bodyRegions= ' + bodyRegions + ' this.bodyViewData.Layers.DataLayer[this.datalayerLength - this.currentLayer - 1].BodyRegion.length= ' + (this.bodyViewData.Layers.DataLayer[this.datalayerLength - this.currentLayer - 1].BodyRegion).length);
        //console.log("Process layer: " + this.currentLayer + ", bodyRegions  length= " + bodyRegions.length);
        //console.log('abc= ' + bodyRegions._BodyRegionId + ', xyze= ' + bodyRegions.Image._ImageName);
         //let k = 1;
         if (this.bodyViewIndex == 9 || this.bodyViewIndex == 10 || this.bodyViewIndex == 11 || this.bodyViewIndex == 12) {

             this.imageCount = 1;
                 const imgName = bodyRegions.Image._ImageName.split('.')[0] + '_mci.png';
                 const skintone = bodyRegions.Image._SkintTone;
                 const bodyRegionId = bodyRegions._BodyRegionId;
                 this.drawImage(imgName, this.bodyViewIndex, this.currentLayer, bodyRegionId, 25, skintone);
             
         }
        else{
           this.imageCount = bodyRegions.length;
           for (let j = bodyRegions.length - 1; j >= 0; j--) {
               const imgName = bodyRegions[j].Image._ImageName.split('.')[0] + '_mci.png';
               const skintone = bodyRegions[j].Image._SkintTone;
               const bodyRegionId = bodyRegions[j]._BodyRegionId;
               //for missing BRs
              // if (bodyRegionId == 2 || bodyRegionId == 3 || bodyRegionId == 6) {

                   this.drawImage(imgName, this.bodyViewIndex, this.currentLayer, bodyRegionId, 25, skintone);
              // }

           }   //if (j === 0) {
            //    k = 1;
            //} else {
            //    k = k + 1;
            //}

        }
    }

    drawImage(imageName: string, bodyViewIndex: number, layerNumber: number, bodyRegionIndex: number, zoom: number, skintone: string): void {
        console.log('drawImage for bodyViewIndex= ' + bodyViewIndex + ',layerNumber= ' + layerNumber + ',bodyRegionIndex= ' + bodyRegionIndex);
        //if (layerNumber == 0) {
        //    console.log('drawImage.in if block. for bodyViewIndex= ' + bodyViewIndex + ',layerNumber= ' + layerNumber + ',bodyRegionIndex= ' + bodyRegionIndex);

        //       const img = new Image();
        //           img.src = '../assets/images/da/' + zoom + '/body-views/' + bodyViewIndex + '/layers/' + layerNumber + '/' + bodyRegionIndex + '/' + skintone + '/' + imageName;
        //           img.onload = (() => {
        //               this.imageData.imageName = imageName;
        //               this.imageData.bodyViewIndex = bodyViewIndex;
        //               this.imageData.layerNumber = layerNumber;
        //               this.imageData.bodyRegion = bodyRegionIndex;
        //               const canvas: HTMLCanvasElement = document.createElement('canvas');
        //               canvas.width = this.imageData.width = img.width;
        //               canvas.height = this.imageData.height = img.height;
        //               this.context = canvas.getContext('2d');
        //               this.context.drawImage(img, 0, 0);
        //               this.imageData.data = Array.from(this.context.getImageData(0, 0, img.width, img.height).data);
        //               console.log(this.imageData);
        //               this.writeImageDataToJson(this.imageData);
        //               this.imageData = new Object();
        //           });
     
             
        //   }

       // else {
            console.log('drawImage.in else block. for bodyViewIndex= ' + bodyViewIndex + ',layerNumber= ' + layerNumber + ',bodyRegionIndex= ' + bodyRegionIndex);

        var img = new Image();
        img.id = 'canvasImg';

        img.src = '../assets/images/da/' + zoom + '/body-views/' + bodyViewIndex + '/layers/' + layerNumber + '/' + bodyRegionIndex + '/' + imageName;
        img.onload = (() => {
            console.log("onload. img.src= " + img.src);
            this.imageData.imageName = imageName;
            this.imageData.bodyViewIndex = bodyViewIndex;
            this.imageData.layerNumber = layerNumber;
            this.imageData.bodyRegion = bodyRegionIndex;
            this.imageData.zoom = zoom;
            var elem = document.getElementById("imgCanvas");
            if (elem != null) {
                elem.parentNode.removeChild(elem);
                elem = null;
            }
            var canvas: HTMLCanvasElement = document.createElement('canvas');
            canvas.id = 'imgCanvas';
            canvas.width = this.imageData.width = img.width;
            canvas.height = this.imageData.height = img.height;
            this.context = canvas.getContext('2d');
            this.context.drawImage(img, 0, 0);
            this.imageData.data = Array.from(this.context.getImageData(0, 0, img.width, img.height).data);
            console.log("imageData of of bodyViewIndex: " + this.bodyViewIndex + ", layerNumber: " + layerNumber + ", bodyRegionIndex: " + bodyRegionIndex + ", imgData= " + this.imageData);
            this.writeImageDataToJson(this.imageData);
            var elem1 = document.getElementById("canvasImg");
            if (elem1 != null) {
                elem1.parentNode.removeChild(elem1);
                elem1 = null;
            }
            this.imageData = new Object();
        });
        //}
        // canvas.width = canvas.width; // to clear the canvas

        // console.log(img.src);
    }

    writeImageDataToJson(imageData: any): void {
        this.imageService.updateImageData(imageData).subscribe((resp) => {
            console.log('inside subscribe of addToImageDataCollection: result= ' + 'bodyViewIndex:' + resp.bodyViewIndex + ',layerNumber:' + resp.layerNumber + ',bodyRegionId:' + resp.bodyRegionId + ', time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));
            if (this.counter < this.remainingFiles75.length) {
                this.counter++;
                this.getDataFromFile(this.remainingFiles75, this.counter);
            }
        });
    }

    addToImageDataCollection(imageData: any): void {
        for (let i = 0; i < this.imageDataCollection.length; i++) {
            if (this.imageDataCollection[i].imageName === imageData.imageName) {
                return;
            }
        }
        this.imageDataCollection.push(imageData);
        console.log("this.imageDataCollection.length= " + this.imageDataCollection.length);

        if (this.imageDataCollection.length === this.imageCount) {
            console.log("starting pushing to server for layer: " + this.currentLayer + " of bodyViewIndex: " + this.bodyViewIndex + ', time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));
            for (let i = 0; i < this.imageDataCollection.length; i++) {
                this.imageService.updateImageData(this.imageDataCollection[i]).subscribe((resp) => {

                    // alert("resp:" + resp.isSuccess); 
                    // this.BRCounter++;

                    this.bodyRegionInLayer.push({ 'bodyViewIndex': resp.bodyViewIndex, 'layerNumber': resp.layerNumber, 'bodyRegionId': resp.bodyRegionId });

                    console.log('inside subscribe of addToImageDataCollection: result= ' + 'bodyViewIndex:' + resp.bodyViewIndex + ',layerNumber:' + resp.layerNumber + ',bodyRegionId:' + resp.bodyRegionId + ', time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));
                    //if (i === this.imageDataCollection.length - 1 && this.BRCounter == this.imageCount) 
                    //{

                   if (this.bodyRegionInLayer.length > 0 && this.bodyRegionInLayer.length == this.imageCount) {
                        //comparign with this.datalayerLength - 2(-2 due to we have not processed from layer 0)
                        if ((this.currentLayer <= this.datalayerLength - 2)) {
                            this.currentLayer++;
                            this.processLayer();
                        }
                         else {
                            if (this.bodyViewIndex < this.totalBodyViews) {
                                this.bodyViewIndex++;
                                //if (this.bodyViewIndex == 3) {

                                //}
                                //else {
                                    this.currentLayer = 1;
                                    this.getBodyViewJson();
                                //}
                            }
                        }
                    }
                });
            }
        }
    }

    generateFile(): void {

        //this.imageService.getRemianingFilesData('../remainingFies/RemainingFiles25');

        //this.imageService.getBodyViewData(this.bodyViewIndex).subscribe((data) => {
        //   // console.log("Fetched body view json for bodyViewIndex: " + this.bodyViewIndex);
        //    this.remainingFiles25 = data;
        //    //this.saveBodyViewImageData();
        //});


        this.imageService.getRemianingFilesData('../assets/remainingFies/RemainingFiles75.json').subscribe((data) => {
            console.log("Fetched  RemainingFiles75.data= ====" + data);

            this.remainingFiles75 = data;
            console.log("this.remainingFiles75.length= " + this.remainingFiles75.length)

            this.getDataFromFile(this.remainingFiles75, this.counter);
            //for (let i = 0; i < this.remainingFiles75.length; i++) {


            //}
        });
    }

    getDataFromFile(remainingFiles75,i): void {

            var filename = this.remainingFiles75[i];
            var spiltedFileName = filename.split('_');

            var bodyViewString = spiltedFileName[0];
            //  alert("bodyViewString: " + bodyViewString + "bodyViewString.indexOf('w'):" + bodyViewString.indexOf('w') + ".bodyViewString.Length: " + bodyViewString.length);

            var indexofW = bodyViewString.indexOf('w');
            var bodyViewId = bodyViewString.substring(indexofW + 1);

                

            var layerString = spiltedFileName[1];
            //  alert("layerString: " + layerString + "layerString.indexOf('r'):" + layerString.indexOf('r') + ".layerString.Length: " + layerString.length);

            var indexofR = layerString.indexOf('r');
            var layerNo = layerString.substring(indexofR + 1);
               
            var brString = spiltedFileName[2];
            // alert("brString: " + brString + "brString.indexOf('id'):" + brString.indexOf("id") + ".brString.Length: " + brString.length);

            var indexofId = brString.indexOf("Id");
            var BRId = (brString.substring(indexofId + 2)).replace('.json', '');

            this.currentLayer = parseInt(layerNo);
            this.bodyViewIndex = parseInt(bodyViewId);
            this.bodyRegionId = parseInt(BRId);

            console.log("bodyViewId= " + bodyViewId + ",layerNo= " + layerNo + ",BRId= " + BRId);


            if (parseInt(layerNo) != 0) {
                console.log("this.bodyViewIndex: " + this.bodyViewIndex + ", this.currentLayer: " + this.currentLayer + ", this.bodyRegionId:" + this.bodyRegionId);
                this.getBodyViewJson();

            }
            //else {
            //    console.log("this.bodyViewIndex: " + this.bodyViewIndex + ", this.currentLayer: " + this.currentLayer + ", this.bodyRegionId:" + this.bodyRegionId);
            //    this.getBodyViewJson();
            //}
                
            }
        
    }