import { Component, Injector, OnInit, Output, EventEmitter, AfterViewInit, ViewChild } from '@angular/core';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import { MobileThemeServiceProxy, GetMobileThemeAttributesListItemDto, CreateOrUpdateHostThemeInputDto } from '@shared/service-proxies/service-proxies';
import { Paginator } from 'primeng/components/paginator/paginator';
import { Table } from 'primeng/components/table/table';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { HostAddMobileAppSettingModalComponent } from './host-add-mobile-app-setting-modal.component';

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

    imgHeader: string = 'data:image/png;base64, ';

    mobileSettingTypes: Map<string, GetMobileThemeAttributesListItemDto>;
    mobileSettingItems: Array<MobileThemeDisplayItem> = [];
    maxSettingCount = 0;

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

    @ViewChild('dataTable', { static: true }) dataTable: Table;
    @ViewChild('paginator', { static: true }) paginator: Paginator;
    @ViewChild('addMobileAppSettingComponent', { static: true }) addMobileAppSettingComponent: HostAddMobileAppSettingModalComponent;

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

    ngOnInit(): void {

    }

    ngAfterViewInit(): void {

    }

    getSettingTypesFromApi(onFinish: () => void): void {
        this.mobileSettingTypes = new Map<string, GetMobileThemeAttributesListItemDto>();
        this.maxSettingCount = 0;
        this._mobileThemeServiceProxy.getMobileThemeAttributes()
            .subscribe(result => {
                if (result.items) {
                    result.items.forEach((item) => {
                        this.mobileSettingTypes[item.name] = item;

                        this.maxSettingCount += 1;
                    });
                }

                onFinish();
            });
    }

    getSettingsFromApi(event?: LazyLoadEvent): void {
        this.showLoaderEvent.emit(true);

        this.getSettingTypesFromApi(() => {
            this._mobileThemeServiceProxy.getMobileThemesForHost(
                this.primengTableHelper.getSorting(this.dataTable),
                this.primengTableHelper.getMaxResultCount(this.paginator, event),
                this.primengTableHelper.getSkipCount(this.paginator, event)
            )
                .subscribe(result => {
                    this.primengTableHelper.totalRecordsCount = result.totalCount;

                    this.mobileSettingItems = [];
                    if (result.items) {
                        result.items.forEach((item) => {
                            var typeInfo = this.mobileSettingTypes[item.attribute];

                            var dataType = typeInfo.data["type"]
                            var value = atob(item.value);
                            if (dataType == 'image') {
                                value = this.imgHeader + item.value;
                            }
                            else if (dataType == 'bool') {
                                value = value.toLowerCase();
                            }

                            this.mobileSettingItems.push(new MobileThemeDisplayItem(item.id, item.tenantId, item.tenantName, item.attribute, value, dataType, typeInfo.hintText));
                        });
                    }
                    this.primengTableHelper.records = this.mobileSettingItems;

                    this.showLoaderEvent.emit(false);
                });
        });
    }

    bypassSecTrust(data: MobileThemeDisplayItem): SafeUrl {
        return this._domSanitizer.bypassSecurityTrustUrl(data.valueTmp)
    }

    getColor(data: MobileThemeDisplayItem): string {
        return data.value
    }

    getBoolValue(data: MobileThemeDisplayItem): boolean {
        var result = data.valueTmp.toLowerCase() == 'true';
        return result;
    }

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

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

        var fileReader: FileReader = new FileReader();
        fileReader.onloadend = (e) => {
            record.valueTmp = "" + 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);
    }

    saveRecordChanges(record: MobileThemeDisplayItem): void {
        this.showLoaderEvent.emit(true);

        var typeInfo = this.mobileSettingTypes[record.attribute];

        var data = new CreateOrUpdateHostThemeInputDto();
        data.tenantId = record.tenantId;
        data.type = typeInfo.typeId;

        if (record.type == 'image') {
            data.base64Value = record.valueTmp.substring(record.valueTmp.indexOf('base64,') + 7);
        }
        else {
            if (record.type == 'bool') {
                record.valueTmp = record.valueTmpBool.toString();
            }

            data.base64Value = record.valueTmp;
        }

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

    showCreateSetting(): void {
        var forCreationType = [];
        for (const [key, mobileSettingType] of Object.entries(this.mobileSettingTypes)) {
            forCreationType.push(mobileSettingType);
        }

        this.addMobileAppSettingComponent.show(forCreationType);
    }

}

class MobileThemeDisplayItem {
    id: number;
    tenantId: number;
    tenantName: string;
    attribute: string;
    value: string;
    valueTmp: string;
    type: string;
    hint: string;
    valueBool: boolean;
    valueTmpBool: boolean;

    constructor(id: number, tenantId: number, tenantName: string, attribute: string, value: string, type: string, hint: string) {
        this.id = id;
        this.tenantId = tenantId;
        this.tenantName = tenantName;
        this.attribute = attribute;
        this.value = value;
        this.valueTmp = value;
        this.type = type;
        this.hint = hint;

        this.valueBool = value == 'true';
        this.valueTmpBool = this.valueBool;
    }
}