import { Component, EventEmitter, Injector, Output, ViewChild, ViewContainerRef } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import {
    UserLocationServiceProxy, CreateUserLocationInput, LocationTableListDto, NameValueDto, ControllerRouteServiceProxy, RouteDefinitionListInput, CreateNewRouteInput,
} from '@shared/service-proxies/service-proxies';
import * as _ from 'lodash';
import { ModalDirective } from 'ngx-bootstrap';
import { LocationListDto, LocationServiceProxy } from '@shared/service-proxies/service-proxies';
import { UserListDto, UserServiceProxy } from '@shared/service-proxies/service-proxies';
import * as jquery from 'jquery';


import { finalize } from 'rxjs/operators';
import { ICommonLookupModalOptions } from '@app/shared/common/lookup/common-lookup-modal.component';
import { AppConsts } from '@shared/AppConsts';
import { LazyLoadEvent } from 'primeng/api';
import { Paginator } from 'primeng/primeng';
import { Table } from 'primeng/table';
import { Observable } from 'rxjs';
import { ControllerRoutesService } from './croutes.service';
import { List } from 'devexpress-richedit';
import { result } from 'lodash';
import * as moment from 'moment';
declare var $: any;
@Component({
    selector: 'createNewRouteModal',
    templateUrl: './create-route-modal.component.html'
})
export class CreateNewRouteModalComponent extends AppComponentBase {

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

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    active = false;
    saving = false;
    userlocation: CreateUserLocationInput = new CreateUserLocationInput();
    // locations: LocationListDto[] = [];
    locations: LocationTableListDto[] = [];
    users: UserListDto[] = [];

    locationInput: {
        id: number;
        name: string;

    };

    userInput: {
        id: number;
        name: string;
    };
    static defaultOptions: ICommonLookupModalOptions = {
        dataSource: undefined,
        canSelect: () => true,
        loadOnStartup: true,
        isFilterEnabled: true,
        pageSize: AppConsts.grid.defaultPageSize
    };

    @Output() itemSelected: EventEmitter<NameValueDto> = new EventEmitter<NameValueDto>();
    @ViewChild('dataTable', { static: true }) dataTable: Table;
    @ViewChild('paginator', { static: true }) paginator: Paginator;

    options: ICommonLookupModalOptions = _.merge({});

    _isLab: boolean = false;
    isShown = false;
    isInitialized = false;
    filterText = '';
    tenantId?: number;
    filteredLocation: any;
    selectedLocation: any;
    route: string;
    routeList: any;
    routeDefInput: RouteDefinitionListInput = new RouteDefinitionListInput();
    createRouteInput: CreateNewRouteInput = new CreateNewRouteInput();

    constructor(
        injector: Injector,
        private _locationService: LocationServiceProxy,
        private _userService: UserServiceProxy,
        private _userLocationService: UserLocationServiceProxy,
        private viewContainerRef: ViewContainerRef,
        private _controllerRouteService: ControllerRouteServiceProxy,
    ) {
        super(injector);
        this._isLab = abp.features.isEnabled('App.RouteDetails');
    }

    ngOnInit():void {
        
    }
    shown(): void {
        this.isShown = true;
        if (!this.options) {
            throw Error('Should call CreateNewRouteModalComponent.configure once before CreateNewRouteModalComponent.show!');
        }
        this.getRecordsIfNeeds(null);
        this.modal.show();
    }

    onShown(): void{
        $('.kt-select2').select2();
    }
    // configure(options: ICommonLookupModalOptions): void {
    //     console.log(options)
    //     this.options = _.merge({}, CreateNewRouteModalComponent.defaultOptions, { title: this.l('Select Route')}, options);
    // }

    getRecordsIfNeeds(event?: LazyLoadEvent): void {
        // if (!this.isShown) {
        //     return;
        // }

        // if (!this.options.loadOnStartup && !this.isInitialized) {
        //     return;
        // }

        this.getRecords(event);
        this.isInitialized = true;
    }

    getRecords(event?: LazyLoadEvent): void {
        this.routeDefInput.locationId = parseInt(localStorage.getItem('operatingLocationId'));
        this._controllerRouteService.pickRouteDefinitionList(this.routeDefInput).subscribe(result => {
            this.routeList = result;
        });
    }

    save(): void {

        this.spinnerService.show();
        this.saving = true;
        this.createRouteInput.routeDefinitionId = Number((<HTMLInputElement>document.getElementById('selectedRouteId')).value);
        if(this.createRouteInput.routeDefinitionId==0){
            this.saving = false;
            (<HTMLInputElement>document.getElementById('routeDiv')).style.color="#FF3300";
        }else{
            let timeId = localStorage.getItem('timeZoneId');
            this.createRouteInput.loadDate = moment.tz(localStorage.getItem('loadDate'), timeId);
            this.createRouteInput.locationId = parseInt(localStorage.getItem('operatingLocationId'));
            this._controllerRouteService.createNewRoute(this.createRouteInput).subscribe(result => {
                this.spinnerService.hide();
                this.saving = false;
                this.createRouteInput.zone = null;
               $('.dispatch-refresh').trigger('click');
                this.close();
            })
        }
        this.spinnerService.hide();
    }

    close(): void {
        this.active = false;
        this.modal.hide();
    }

    refreshTable(): void {
        this.paginator.changePage(this.paginator.getPage());
    }

    getParentComponent() {
        return this.viewContainerRef['_data'].componentView.component.viewContainerRef['_view'].component
    }
}