import { Component, ViewChild, Injector, Output, EventEmitter} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { ReportServiceProxy, ReportList, UserServiceProxy, UserListDto, UploadReport } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';
import * as _ from 'lodash';
declare var $: any;

@Component({
    selector: 'importReportModal',
    templateUrl: './import-report-modal.component.html'
})
export class ImportReportModalComponent extends AppComponentBase {

    @ViewChild('createOrEditModal', { static: true }) modal: ModalDirective;


    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    active = false;
    saving = false;
    reportName: string;
    isActive = false;    
    selectedStartDay:string;
    selectedEndDay:string;
    //createTicketType: CreateTicketTypeDto = new CreateTicketTypeDto();
     files: File[] = [];    
      showAlert: boolean = false;
      data: any[] = [];
      attachMents: UploadReport = new UploadReport();
      multipleFiles: boolean = false;
      disable: boolean = true;
    constructor(
        injector: Injector,
        private _reportServiceProxy: ReportServiceProxy,
        
    ) {
        super(injector);
    }

    onKey(event) {
        if(this.reportName == '' || this.reportName == null || this.multipleFiles == true || this.showAlert == true || this.files.length != 1) {
            this.disable = true;
        }
        else {
            this.disable = false;
        }
    }
    onSelect(event) {
        //   console.log(event.addedFiles);
        if (event.rejectedFiles.length != 0) {
            this.showAlert = true;
            if(this.reportName == '' || this.reportName == null || this.multipleFiles == true || this.showAlert == true || this.files.length != 1) {
                this.disable = true;
            }
            else {
                this.disable = false;
            }
        }

        this.files.push(...event.addedFiles);
        let f = event.addedFiles;
        if(this.files.length > 1) {
             this.multipleFiles = true;
             this.showAlert = true;
             if(this.reportName == '' || this.reportName == null || this.multipleFiles == true || this.showAlert == true) {
                 this.disable = true;
             }
             else {
                 this.disable = false;
             }
        }
        else if(this.files.length == 0) {
             this.showAlert = true;
             if(this.reportName == '' || this.reportName == null || this.showAlert == true) {
                 this.disable = true;
             }
             else {
                 this.disable = false;
             }
        }
        else if(this.files.length == 1) {
             if(this.reportName == '' || this.reportName == null) {
                 this.disable = true;
             }
             else {
                 this.disable = false;
             }
        }
        else {
            this.multipleFiles = false;
            this.disable = false;
        }
        for (const file of f) {
            this.getData(file);

        }

    }
    onBeforeSend(event): void {
        event.xhr.setRequestHeader('Authorization', 'Bearer ' + abp.auth.getToken());
    }

    getData(file) {

        var reader: any;
        let me = this;
        reader = new FileReader();
        reader.readAsDataURL(file);
        //reader.onload = function () {
        //me.modelvalue = reader.result;
        //console.log(reader.result.toString().split(',')[1]);


        //};
        reader.onload = function () {
            //me.modelvalue = reader.result.toString().split(',')[1];
            //me.image.fileName = file.name;
            //me.image.base64EncodedData = me.modelvalue;

            me.data.push(
                { fileName: file.name, base64EncodedData: reader.result.toString().split(',')[1] });




        };
        reader.onerror = function (error) {
            // console.log('Error: ', error);
        };
    }

    onRemove(event) {
        //   console.log(event.name);
        this.files.splice(this.files.indexOf(event), 1);
        //this.data.splice(this.data.indexOf(event), 1);
        

        if(this.files.length > 1) {
             this.multipleFiles = true;
             this.showAlert = true;
             if(this.reportName == '' || this.reportName == null || this.multipleFiles == true || this.showAlert == true) {
                 this.disable = true;
             }
             else {
                 this.disable = false;
             }
        }
        else {
            this.multipleFiles = false;
            this.disable = false;
        }
        if(this.files.length == 0) {
            this.disable = true;
        }
        _.remove(this.data, function (el) {

            return el.fileName === event.name;


        });
        
    }

    closeAlert() {
        this.showAlert = false;
    }

    show(): void {
            
            this.active = true;
            this.modal.show();
        
    }

    save(): void {
            this.saving = true;
            for (let item of this.data) {

            let a = new UploadReport({
                name: this.reportName,
                base64EncodedData: item.base64EncodedData,

            });

            this.attachMents = a;
            }
            this._reportServiceProxy.uploadReport(this.attachMents)
                 .pipe(finalize(() => { this.saving = false;}))
                 .subscribe(() => {
                    this.notify.info(this.l('SavedSuccessfully'));
                    this.close();
                    this.modalSave.emit(null);
                 });
            
    }







    close(): void {
        this.files = [];
        this.reportName = null;
        this.active = false;
        this.isActive = false;
        this.modal.hide();
    }
}