import { Observable } from 'rxjs';
import { Component, Inject, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { DataTableColumnDirective } from '@swimlane/ngx-datatable';
import { IStartServiceClient } from '../../../../services/gateway';
import { IBrowserSessionService } from '../../../../services/common/call-session.service';
import { ContextViewService } from '../../screens/layout-components/context-view/context-view.service';
import { ServiceHistoryApplicationSummary } from '../../../../services/gateway/data-transfer.models';
import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmationModalComponent } from '../../../../components/confirmation-modal/confirmation-modal.component';
import { ServiceHistoryService } from '../../../../services/gateway/service-history.client';
import { UnsubscribableComponent } from '../../../../services/common/self-unsubscribable';
import { NgxDatatableComponent } from '../../../../features/ngx-datatable/components/datatable.component';
import { NgxDataTableUtil } from '../../../../services/utils/ngx-datatable.util';
import { ResizableColumn } from '../../screens/service-history/service-history.model';

@Component({
    selector: 'application-history',
    templateUrl: './application-history.component.html',
    styleUrls: ['./application-history.component.less']
})

export class ApplicationHistoryComponent extends UnsubscribableComponent implements OnInit {
    constructor(@Inject('IServiceHistoryService') private serviceHistoryService: ServiceHistoryService,
                @Inject('IBrowserSessionService') private browserSessionService: IBrowserSessionService,
                @Inject('IStartServiceClient') private startServiceClient: IStartServiceClient,
                private contextViewService: ContextViewService,
                private modalService: NgbModal,
                private ngxDataTableUtil: NgxDataTableUtil) {
        super();
    }

    @ViewChild(NgxDatatableComponent)
    public dataTable: NgxDatatableComponent;

    @ViewChildren(DataTableColumnDirective)
    public tableColumns: QueryList<DataTableColumnDirective>;

    public serviceHistoryApplicationSummary: ServiceHistoryApplicationSummary[] = [];
    public resumeTooltip: string = 'Resume application';
    public cancelTooltip: string = 'Cancel application';

    private modalOptions: NgbModalOptions = {backdrop: 'static'};

    public ngOnInit(): void {
        if (!this.browserSessionService.currentSessionSnapshot) {
            return;
        }

        const {InstallationId, CustomerId} = this.browserSessionService.currentSessionSnapshot;
        this.contextViewService.getCurrentContextView()
            .takeWhile(() => this.isAlive)
            .do(() => this.loading = true)
            .switchMap(contextView => {
                if (contextView && contextView.isAccountContext) {
                    return this.serviceHistoryService.getApplicationsByCustomer(CustomerId);
                }

                return this.serviceHistoryService.GetApplicationsByInstallation(InstallationId);
            })
            .subscribe(data => {
                this.loading = false;
                this.serviceHistoryApplicationSummary = data;

                setTimeout(() => {
                    this.ngxDataTableUtil.recalculateColumnWidth(this.dataTable,
                        this.serviceHistoryApplicationSummary,
                        this.tableColumns,
                        this.getResizableColumnNames());
                    this.dataTable.recalculate();
                });
            }, () => {
                this.loading = false;
            });
    }

    public cancelApplication(selectedApplication: ServiceHistoryApplicationSummary, index) {
        const modal: NgbModalRef = this.modalService.open(ConfirmationModalComponent, this.modalOptions);

        modal.componentInstance.bodyText = 'If you cancel the application, it cannot be continued' +
            ' at a later time. Are you sure you want to cancel the application?';
        modal.componentInstance.headerText = 'Cancel';
        modal.componentInstance.confirmButtonText = 'Yes';
        modal.componentInstance.cancelButtonText = 'No';
        Observable.fromPromise(modal.result)
            .do(() => this.loading = true)
            .takeWhile(() => this.isAlive)
            .switchMap(() => this.startServiceClient.cancelApplication(selectedApplication.ApplicationId))
            .finally(() => {
                this.loading = false;
            })
            .subscribe(value => {
                this.serviceHistoryApplicationSummary[index].Status = 2;
            });
    }

    public getResizableColumnNames(): ResizableColumn[] {
        return [
            new ResizableColumn('ApplicationId'),
            new ResizableColumn('Address.Street'),
            new ResizableColumn('CustomerName')
        ];
    }

}