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

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

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

        if (subAppId) {
            this.subAppIconId = subAppId;
            self._dictionaryTypeService.getDictionaryTypeForEdit(subAppId).subscribe(result => {
                self.dictionaryType = result.dictionaryType;
            });
        }
        this.imageChangedEvent = null;
        self.modal.show();
    }

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

    save(): void {
        const self = this;
        this.saving = true;
        self.dictionaryType.isSystem = false;
        this._dictionaryTypeService.createOrEdit(self.dictionaryType)
            .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.dictionaryType = new CreateOrEditDictionaryTypeDto();
        this.isEdit = false;
        this.modal.hide();
    }
}