import { Component, ElementRef, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { SubAppServiceProxy, SubAppDto, CreateOrUpdateSubAppInput } from '@shared/service-proxies/service-proxies';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { DomSanitizer } from '@angular/platform-browser';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AppConsts } from '@shared/AppConsts';
import { FileUploader, FileUploaderOptions, FileItem } from 'ng2-file-upload';
import { TokenService } from 'abp-ng2-module/dist/src/auth/token.service';
import { IAjaxResponse } from 'abp-ng2-module/dist/src/abpHttpInterceptor';

@Component({
    selector: 'createOrEditSubappModal',
    templateUrl: './create-or-edit-subapp-modal.component.html'
})
export class CreateOrEditSubappModalComponent extends AppComponentBase {

    @ViewChild('createOrEditModal') modal: ModalDirective;
    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
    active = false;
    saving = false;
    uploadUrl: string;
    exCallForm: FormGroup;
    imageChangedEvent: any = '';
    subApp: SubAppDto = new SubAppDto();
    public uploader: FileUploader;
    private _uploaderOptions: FileUploaderOptions = {};
    subAppIconId: string;
    isEdit = false;
    profilePicture = AppConsts.appBaseUrl + '/assets/common/images/default-profile-picture.png';

    constructor(
        injector: Injector, public sanitizer: DomSanitizer,
        private _tokenService: TokenService,
        private _subAppService: SubAppServiceProxy
    ) {
        super(injector);
        this.uploadUrl = AppConsts.remoteServiceBaseUrl + '/api/services/app/SubApp/UploadAppsIcon';
        this.subApp.isEnabled = true;
    }
    show(subAppId?: string): void {
        const self = this;
        self.active = true;

        if (subAppId) {
            this.subAppIconId = subAppId;
            self._subAppService.getSubAppForEdit(subAppId).subscribe(result => {
                self.subApp = result.subApp;
                if (result.subApp.icon) {
                    this.profilePicture = 'data:image/jpeg;base64,' + result.subApp.icon;
                    this.isEdit = true;
                }
            });
        }
        this.imageChangedEvent = null;
        this.initFileUploader();
        self.modal.show();
    }

    initFileUploader(): void {
        this.uploader = new FileUploader({ url: this.uploadUrl });
        this._uploaderOptions.autoUpload = false;
        this._uploaderOptions.authToken = 'Bearer ' + this._tokenService.getToken();
        this._uploaderOptions.removeAfterUpload = true;
        this.uploader.onAfterAddingFile = (file) => {
            file.withCredentials = false;
        };
        this.uploader.setOptions(this._uploaderOptions);
    }

    onShown(): void {
        document.getElementById('SubAppCode').focus();
    }

    imageCroppedFile(file: File) {
        let files: File[] = [file];
        console.log(files);
        this.uploader.clearQueue();
        this.uploader.addToQueue(files);
    }

    fileChangeEvent(event: any): void {
        if (event.target.files[0].size > 3145728) { //5MB
            this.message.warn('请选择2M内App图标！');
            return;
        }
        console.log();
        this.imageChangedEvent = event;
        this.profilePicture = '';
    }

    save(): void {
        if (!this.imageChangedEvent && !this.isEdit) {
            this.message.warn('请选择App图标！');
            return;
        }
        const self = this;
        const input = new CreateOrUpdateSubAppInput();
        input.subApp = self.subApp;
        input.subApp.icon = '2';
        this.saving = true;
        console.log('新增实体', input, input.subApp);
        this._subAppService.createOrUpdateSubApp(input)
            .pipe(finalize(() => this.saving = false))
            .subscribe(result => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                if (this.imageChangedEvent) {
                    console.log('有图片');
                    this.uploader.onBuildItemForm = (fileItem: FileItem, form: any) => {
                        form.append('FileType', fileItem.file.type);
                        form.append(result, '');
                    };
                    this.uploader.uploadAll();
                }
                this.modalSave.emit(null);
            });
    }

    close(): void {
        this.active = false;
        this.subApp = new SubAppDto();
        this.isEdit = false;
        this.modal.hide();
    }
}