import { Component, ElementRef, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { SubAppServiceProxy, SubAppDto, CreateOrUpdateSubAppInput, DictionariesServiceProxy, DictionaryDto, CreateOrEditRoleInterfaceDto, GetRoleInterfaceForEditOutput, RoleInterfaceServiceProxy } 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: 'createOrEditRoleInterfaceModal',
    templateUrl: './create-or-edit-roleInterface-modal.component.html'
})
export class CreateOrEditRoleInterfaceModalComponent extends AppComponentBase {

    @ViewChild('createOrEditModal') modal: ModalDirective;
    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
    active = false;
    saving = false;
    uploadUrl: string;
    exCallForm: FormGroup;
    imageChangedEvent: any = '';
    roleInterface: CreateOrEditRoleInterfaceDto = new CreateOrEditRoleInterfaceDto();
    public uploader: FileUploader;
    private _uploaderOptions: FileUploaderOptions = {};
    subAppIconId: string;
    isEdit = false;

    constructor(
        injector: Injector, public sanitizer: DomSanitizer,
        private _tokenService: TokenService,
        private _roleInterfaceService: RoleInterfaceServiceProxy
    ) {
        super(injector);
    }
    show(subAppId?: string): void {
        const self = this;
        self.active = true;

        if (subAppId) {
            this.subAppIconId = subAppId;
            self._roleInterfaceService.getRoleInterfaceForEdit(subAppId).subscribe(result => {
                self.roleInterface = result.roleInterface;
            });
        }
        this.imageChangedEvent = null;
        self.modal.show();
    }

    onShown(): void {

    }

    save(): void {
        const self = this;
        const input = new CreateOrEditRoleInterfaceDto();
        input.id = self.roleInterface.id;
        input.userArea = self.roleInterface.userArea;
        input.userRole = self.roleInterface.userRole;
        input.appRole = self.roleInterface.appRole;
        this.saving = true;
        this._roleInterfaceService.createOrEdit(self.roleInterface)
            .pipe(finalize(() => this.saving = false))
            .subscribe(result => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
            });
    }

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