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

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

    constructor(
        injector: Injector, public sanitizer: DomSanitizer,
        private _tokenService: TokenService,
        private _dictionaryService: DictionariesServiceProxy
    ) {
        super(injector);
    }
    show(subAppId?: string): void {
        const self = this;
        self.active = true;
        self._dictionaryService.getDictionaryType().subscribe(result => {
            self.dictionaryTypeList = result;
            console.log(result);
        });
        if (subAppId) {
            this.subAppIconId = subAppId;
            self._dictionaryService.getDictionaryForEdit(subAppId).subscribe(result => {
                self.dictionary = result.dictionary;
                self.selectDicType = result.dictionary.dictionaryTypeId;
            });
        }
        self.modal.show();
    }

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

    save(): void {
        const self = this;
        const input = new CreateOrEditDictionaryDto();
        input.id = self.dictionary.id;
        input.code = self.dictionary.code;
        input.name = self.dictionary.name;
        input.value = self.dictionary.value;
        input.description = self.dictionary.description;
        input.dictionaryTypeId = self.dictionary.dictionaryTypeId;
        this.saving = true;
        if (!input.dictionaryTypeId) {
            console.log(self.selectDicType);
            input.dictionaryTypeId = self.selectDicType;
        }
        this._dictionaryService.createOrEdit(input)
            .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.dictionary = new DictionaryDto();
        this.isEdit = false;
        this.modal.hide();
    }
}