import { Component, Injector, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { GetMobileThemeAttributesListItemDto, CreateOrUpdateHostThemeInputDto, MobileThemeType, MobileThemeServiceProxy, TenantListDropDown } from '@shared/service-proxies/service-proxies';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { ModalDirective } from 'ngx-bootstrap';

@Component({
    selector: 'host-add-mobile-app-setting-modal',
    templateUrl: './host-add-mobile-app-setting-modal.component.html',
    animations: [appModuleAnimation()]
})
export class HostAddMobileAppSettingModalComponent extends AppComponentBase implements OnInit {

    @Output() showLoaderEvent = new EventEmitter<boolean>();
    @Output() modalSaveEvent = new EventEmitter<boolean>();

    @ViewChild('modalDirective', { static: false }) modalDirective: ModalDirective;

    tenantList: Array<TenantListDropDown> = [];
    selectedTenant: TenantListDropDown;
    tenantId: number;
    mobileSettingTypes: Array<MobileSettingDisplayItem> = [];
    selectedMobileSettingType: MobileSettingDisplayItem;
    appSettingValue: string;

    constructor(
        injector: Injector,
        private _mobileThemeServiceProxy: MobileThemeServiceProxy,
        private _domSanitizer: DomSanitizer
    ) {
        super(injector);
    }

    ngOnInit(): void {

    }

    getTenantListFromApi(onFinish: () => void): void {
        this.showLoaderEvent.emit(true);
        this.tenantList = [];
        this._mobileThemeServiceProxy.getMobileThemeTenants()
            .subscribe(result => {
                this.showLoaderEvent.emit(false);

                if (result.items) {
                    this.tenantList = result.items;
                }

                onFinish();
            });
    }

    show(mobileSettingTypes: Array<GetMobileThemeAttributesListItemDto>): void {
        this.mobileSettingTypes = [];
        mobileSettingTypes.forEach((item) => {
            this.mobileSettingTypes.push(new MobileSettingDisplayItem(item.typeId, item.name, item.hintText, item.data['type']));
        });

        this.getTenantListFromApi(() => {
            this.modalDirective.show();
        });
    }

    selectedChange($event): void {
        this.appSettingValue = "";
        if (this.selectedMobileSettingType != null) {
            this.appSettingValue = this.selectedMobileSettingType.defaultValue;
        }
    }

    selectedTenantChange($event): void {
        this.tenantId = null;
        if (this.selectedTenant != null) {
            this.tenantId = this.selectedTenant.id;
        }
    }

    close(): void {
        this.selectedMobileSettingType = null;
        this.appSettingValue = "";

        this.selectedTenant = null;
        this.tenantId = null;

        this.modalDirective.hide();
    }

    save(): void {
        this.showLoaderEvent.emit(true);

        var data = new CreateOrUpdateHostThemeInputDto();
        data.tenantId = this.tenantId;
        data.type = this.selectedMobileSettingType.typeId;

        if (this.selectedMobileSettingType.dataType == 'image') {
            data.base64Value = this.appSettingValue.substring(this.appSettingValue.indexOf('base64,') + 7);
        }
        else {
            data.base64Value = this.appSettingValue;
        }

        this._mobileThemeServiceProxy.createOrUpdateThemeForHost(data)
            .subscribe(result => {
                this.showLoaderEvent.emit(false);
                this.modalSaveEvent.emit(null);

                this.close();
            });
    }

    bypassSecTrust($event): SafeUrl {
        return this._domSanitizer.bypassSecurityTrustUrl(this.appSettingValue);
    }

    fileChangeListener($event): void {
        this.updateImageForRecord($event.target);
    }

    updateImageForRecord(inputData: any): void {
        var file: File = inputData.files[0];

        var fileReader: FileReader = new FileReader();
        fileReader.onloadend = (e) => {
            this.appSettingValue = "" + fileReader.result;

            /*
            var base64Str = record.valueTmp.substring(record.valueTmp.indexOf('base64,') + 7);
            console.log("record.valueTmp =" + base64Str + ", index=" + record.valueTmp.indexOf('base64,')); */
        }
        fileReader.readAsDataURL(file);
    }

}

class MobileSettingDisplayItem {
    typeId: MobileThemeType;
    name: string;
    hintText: string;
    dataType: string;
    defaultValue: string;

    constructor(typeId: MobileThemeType, name: string, hintText: string, dataType: string) {
        this.typeId = typeId;
        this.name = name;
        this.hintText = hintText;
        this.dataType = dataType;

        switch (dataType) {
            case 'int':
                this.defaultValue = '1';
                break;
            case 'bool':
                this.defaultValue = 'true';
                break;
            default:
                this.defaultValue = '';
                break;
        }
    }
}