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, CreateOrUpdateThemeInputDto, MobileThemeType, MobileThemeServiceProxy } from '@shared/service-proxies/service-proxies';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { ModalDirective } from 'ngx-bootstrap';

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

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

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

    mobileSettingTypes: Array<MobileSettingDisplayItem> = [];
    selectedMobileSettingType: MobileSettingDisplayItem;
    appSettingValue: string;

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

    ngOnInit(): void {

    }

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

        this.modalDirective.show();
    }

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

    close(): void {
        this.modalDirective.hide();
    }

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

        var data = new CreateOrUpdateThemeInputDto();
        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.createOrUpdateThemeForTenant(data)
            .subscribe(result => {
                this.showLoaderEvent.emit(false);

                this.selectedMobileSettingType = null;
                this.appSettingValue = "";

                this.modalSaveEvent.emit(null);

                this.close();
            });
    }

}

class MobileSettingDisplayItem {
    typeId: MobileThemeType;
    name: string;
    hintText: string;
    dataType: string;
    defaultValue: string;
    data: { [key: string]: string; };

    constructor(typeId: MobileThemeType, name: string, hintText: string, dataType: string, data: { [key: string]: string; }) {
        this.typeId = typeId;
        this.name = name;
        this.hintText = hintText;
        this.dataType = dataType;
        this.data = data;

        switch (dataType) {
            case 'int':
                this.defaultValue = this.data["min"];
                break;
            case 'bool':
                this.defaultValue = 'true';
                break;
            default:
                this.defaultValue = '';
                break;
        }
    }
}