import { Component, Injector, ViewChild, ViewEncapsulation, OnInit, DoCheck, Input } from '@angular/core';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import { OrderStatusAttachmentServiceProxy } from '@shared/service-proxies/service-proxies';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { Paginator } from 'primeng/components/paginator/paginator';
import { Table } from 'primeng/components/table/table';
import { finalize } from 'rxjs/operators';
import { ModalDirective } from 'ngx-bootstrap';
import { ActivatedRoute, Router } from '@angular/router';
import * as moment from 'moment';
import { DomSanitizer } from '@angular/platform-browser';
import { CarouselModule } from 'primeng/carousel';


@Component({
    templateUrl: './route-detail-attachment.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()],
    styleUrls: ['./route-detail.component.less'],
    selector: 'routeDetailAttachment'

})
export class RouteDetailAttachment extends AppComponentBase implements OnInit {

    active = false;
    saving = false;
    orderId: number;
    images: Array<{ index: number, src: string, caption: any, thumb: string }> = new Array();
    caption: string;
    count: number;
    private _album: Array<{}> = [];
    @ViewChild('routeDetailAttachmentModal', { static: false }) modal: ModalDirective;
    constructor(
        injector: Injector,
        private id: ActivatedRoute,
        private _attachmentService: OrderStatusAttachmentServiceProxy,
        public sanitizer: DomSanitizer
    ) {
        super(injector);
    }


    ngOnInit() {
        // this.id.paramMap.subscribe(params => {
        //     this.orderId = Number(params.get('id'));
        // });
    }
    show(id: number): void {
        this.spinnerService.show();
        this.images = [];
        this.count = 0;
        let show = true;

        this._attachmentService.getOrderStatusPhotos(id).subscribe(result => {
            this.active = true;
            this.modal.show();

            this.count = result.items.length;

            result.items.forEach((image, index)=> {
                let x = false
                if(result.items[index].fileName.indexOf("blind_count") !== -1){
                    x = true
                }
                else {
                    x= false
                }
                
                this.images.push({
                    index: index, 
                    src: 'data:image/jpeg;base64,' + image.content,
                    thumb: 'data:image/jpeg;base64,' + image.content,
                    caption: result.items[index].deviceTime.utcOffset(moment.parseZone(result.items[index].deviceTime).utcOffset()).format('LLL') 
                    +(x == true ? "-"+" Blind Count" : "")
                });
            });

            this.spinnerService.hide();
        });
        // this._attachmentService.getOrderStatusAttachmentList(id, localStorage.getItem('timeZone'))
        //     .subscribe(result => {
        //         this.count = result.length;
        //         for (let index = 0; index < result.length; index++) {
        //             this._attachmentService.getImageIdInternal(result[index].binaryObjectId).subscribe(image => {
        //                 // result[index].deviceTime = moment(result[index].deviceTime).tz(localStorage.getItem('timeZoneId'));
        //                 this.images.push({
        //                     index: index, src: 'data:image/jpeg;base64,' + image.pictureString,
        //                     thumb: 'data:image/jpeg;base64,' + image.pictureString,
        //                     caption: result[index].deviceTime.utcOffset(moment.parseZone(result[index].deviceTime).utcOffset()).format('LLL')
        //                 });
        //                 this.spinnerService.hide();
                        
        //                 if(index == 0){
        //                     this.active = true;
        //                     this.modal.show();
        //                 }
                        
        //             });

        //         }

        //     });
    }
    onShown(): void {

    }


    close(): void {
        this.active = false;
        this.modal.hide();
    }

}