import {
    Component,
    Injector,
    ViewChild,
    ViewEncapsulation,
} from "@angular/core";
import {
    UserServiceProxy,
    CustomerServiceProxy,
    BusinessHoursServiceProxy,
    GetCustomerProfileDto,
    GetBusinessHoursDto,
    ClinicOrders,
    ProfileServiceProxy,
} from "@shared/service-proxies/service-proxies";
import { AppComponentBase } from "@shared/common/app-component-base";
import { appModuleAnimation } from "@shared/animations/routerTransition";
import { Table } from "primeng/components/table/table";
import { LazyLoadEvent } from "primeng/api";
import { Paginator } from 'primeng/components/paginator/paginator';
import { catchError, finalize } from 'rxjs/operators';
import { PermissionTreeModalComponent } from '@app/admin/shared/permission-tree-modal.component';
import { PrimengTableHelper } from "@shared/helpers/PrimengTableHelper";
import * as signalR from "@aspnet/signalr";
import { AppConsts } from "@shared/AppConsts";
import * as moment from 'moment-timezone';
// import { PermissionTreeModalComponent } from '../shared/permission-tree-modal.component';

@Component({
    selector: "customer-dashboard",
    templateUrl: "./customer-dashboard.component.html",
    styleUrls: ["./customer-portal.component.css"],
    animations: [appModuleAnimation()],
    encapsulation: ViewEncapsulation.None,
})
export class CustomerDashboardComponent extends AppComponentBase {
    _entityTypeFullName = 'SprintTek.Authorization.Users.User';
    entityHistoryEnabled = false;
    uploadUrl: string;

    //Filters
    advancedFiltersAreShown = false;
    filterText = '';
    role = '';
    onlyLockedUsers = false;
    saving: boolean;
    profile: GetCustomerProfileDto = new GetCustomerProfileDto();
    private hubConnection: signalR.HubConnection;
    routeId: string;
    sched: ClinicOrders[];
    today = new Date();
    timer;
    isAlert: boolean = false;
    isLate: boolean = false;
    arrivalTime: string = "";
    orderId: number;
    profilePicture = AppConsts.appBaseUrl + '/assets/common/images/default-profile-picture.png';
    timezoneInfo = "UTC";
    constructor(injector: Injector,
        private _customerProfileProxy: CustomerServiceProxy,
        private _customerRepository : CustomerServiceProxy,
        private _profileServiceProxy: ProfileServiceProxy,
    ) {
        super(injector);
    }
    address: string="";
    clinicName: string="";
    onLoad: boolean;
    ngOnInit(): void {
        this.getCustomerProfile();
        this.pickupScheduleLister();
        this.timer = setInterval(() => {
            this.today = new Date();
          }, 1000);
        this.getProfilePicture();
        this.registerEvent();
    }

    ngOnDestroy(){
        clearInterval(this.timer);
      }

    getCustomerProfile() {
        this.spinnerService.show();
        this._customerProfileProxy.getCustomerProfile()
            .pipe(catchError((err, caught): any => {
                this.spinnerService.hide();
            }))
            .subscribe((result: GetCustomerProfileDto) => {
                this.profile = result;
                if(result!=null){
                    this.getPickupSchedule();
                    if(result.userId!=null){
                        localStorage.setItem("customerUserId", result.userId.toString());
                        this.profilePicture = result.profilePicture == null || result.profilePicture == "" ? 
                        AppConsts.appBaseUrl + '/assets/common/images/default-profile-picture.png' : 'data:image/jpeg;base64,' + result.profilePicture;
                    }
                    var addressLine2 = result.addressLine2==null ? "" : " " +result.addressLine2
                    this.address = result.addressLine1 +addressLine2
                                   +" " +result.city +", " +result.state +" " +result.postalCode;
                    this.clinicName = result.accountNo +" | " +result.clinicName;
                    if(result.phone!=''|| result.phone == null){
                        this.onLoad = true;
                    }
                }
                this.spinnerService.hide();
            });
    }

    getPickupSchedule() {
        this._customerRepository.getPickupSchedule(this.timezoneInfo)
            .subscribe(result => {
                this.sched = result;
                if (result != null) {
                    this.routeId = result[0].routeId.toString();
                    this.isAlert = result[0].alert;
                    this.isLate = result[0].isLate;
                    this.arrivalTime = result[0].arrival;
                    this.orderId = result[0].orderId;
                    this.timezoneInfo = result[0].timezoneInfo;
                }
            });
    }

    pickupScheduleLister() {
        this.hubConnection = new signalR.HubConnectionBuilder()
            .withUrl(AppConsts.remoteServiceBaseUrl + '/customer')
            .build();
        this.hubConnection
            .start()
            .then(() => console.log('Connection started'))
            .catch(err => console.log('Error while starting connection: ' + err));
        this.hubConnection.on('GetPickupSchedule', (message) => {
            if (message == this.routeId) {
                this.getPickupSchedule();
            }
        });
    }

    changeProfilePicture(): void {
        abp.event.trigger('app.show.changeProfilePictureModal');
    }

    getProfilePicture(): void {
        this._profileServiceProxy.getProfilePicture().subscribe(result => {
            if (result && result.profilePicture) {
                this.profilePicture = 'data:image/jpeg;base64,' + result.profilePicture;
            }
        });
    }

    registerEvent(){
        abp.event.on('profilePictureChanged', () => {
            this.getProfilePicture();
        });
    }

    refresh(){
        this.getCustomerProfile();
        this.getProfilePicture();
    }
}